conversion de composants de classe à crochets: useDispatch / useSelector: où appeler et quoi ne va pas ici?

Roy:

Je suis en train de convertir le composant de classe I créé pour une fonctionnelle. composante de classe fonctionne bien, mais quand je suis en train de le faire même chose en utilisant de manière fonctionnelle, je ne suis pas en mesure d'obtenir les appels correctement. Je suis en train de charger des données sur ui de l'appel REST à l'aide Axios. useDispatch / useSelector. où appeler et ce qui est ne va pas ici? Je comprends que doivent utiliser useEffect au lieu de componentdidmount mais je pense qu'il est pas appelé la façon dont je suis en train. des conseils s'il vous plaît ...

Ancien code Composant Classe:

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));

Nouveau code Je suis en train ressemble à:

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>);

Ramesh:

Je pense que vous utilisez de useDispatchmanière incorrecte.

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

devrait être

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

Toujours dans le composant à base de classe, que vous utilisiez fetchRequests()mais là , vous essayez d'utiliser fetchPortfolioRequests().

mise à jour

Votre composant fonctionnel devrait ressembler à ceci:

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 />;

}

mise à jour

si vous voulez une fois à l'envoi lorsque le composant rend alors vous pouvez simplement utiliser

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