フックへの変換クラスコンポーネント：useDispatch / useSelector：それを呼び出すようにしていただきましたが、ここで間違っていますか？

ロイ ：

私は、機能的なものに作成したクラスコンポーネントを変換しようとしています。クラスコンポーネントが正常に動作しているが、私は適切に呼び出しを取得することはできないのです機能的な方法を使用して同じことをやろうとしていたとき。私はAxiosを使用してREST呼び出しからUI上のデータをロードしようとしています。useDispatch / useSelector。どこにといただきましたが、ここで間違って呼び出すには？私の代わりにcomponentdidmountのuseEffectを使用する必要があることを理解が、私はそれは私がしようとしている道と呼ばれて得ていないと思います。アドバイスを下さい...

旧クラスコンポーネントのコード：

class MyClassComponent extends Component {
componentDidMount() {
    const { changeRequests, listRequests } = this.props;
    if (!changeRequests.fulfilled) {
      listRequests();
    }
  }
  render() {
      const { changeRequests } = this.props;
      if (!changeRequests.fulfilled) {
      return (
        <CircularProgress />
      )
    }
      return(
       // code
    )
   }      
 }
//useSelector replace mapStateToProps
const mapStateToProps = state => {// onRequest is reducer class
  return {
    changeRequests: state.onRequest.changeRequests
  }
};
//useDispatch replaces
const mapDispatchToProps = dispatch => {// connects with Action class and then with axios DB call
  return {
    listRequests: () => dispatch(fetchRequests())
  }
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MyClassComponent));

私はのようなルックスをしようとしている新しいコード：

export default function MyFunctionalComponent() {
const [state, setState] = React.useState({});

useEffect(() => {
const { changeRequests, listRequests } = props;
    if (!changeRequests.fulfilled) {/
      listRequests();
    }
},[]);
const changeRequests = useSelector(state => state.onRequest.changeRequests);

const listRequests = useDispatch(() => {
             fetchPortfolioRequests();
},[]);
return(<h2>{changeRequests.data}</h2>);

ラメシュ：

私はあなたが使用していると思うuseDispatch間違って。

const listRequests = useDispatch(() => {
  fetchPortfolioRequests();
},[]);

する必要があります

const dispatch = useDispatch();
const listRequests = useCallback(() => dispatch(fetchPortfolioRequests()),[dispatch]);

また、クラスベースのコンポーネントでは、あなたが使用していたfetchRequests()が、ここであなたが使用しようとしていますfetchPortfolioRequests()。

更新

あなたの機能コンポーネントは次のようになります。

export default function MyFunctionalComponent() {


  const changeRequests = useSelector(state => state.onRequest.changeRequests);
  const dispatch = useDispatch();
  const listRequests = useCallback(() => dispatch(fetchPortfolioRequests()), [dispatch]);

  useEffect(() => {
    if (!changeRequests.fulfilled) {
      listRequests();
    }
  }, [listRequests, changeRequests]);

  return changeRequests.fulfilled ? <h2>{changeRequests.data}</h2> : <CircularProgress />;

}

更新

コンポーネントのレンダリング時に一度派遣する場合は、あなただけの使用をすることができます

  useEffect(() => {
      listRequests();
  }, [listRequests]);