convertir el componente de clase de ganchos: useDispatch / useSelector: dónde llamar y cuál es incorrecto aquí?

Roy:

Estoy tratando de convertir el componente I clase creada a una funcional. componente de clase está trabajando bien, pero cuando estoy tratando de hacer lo mismo usando de manera funcional no soy capaz de obtener las llamadas correctamente. Estoy tratando de cargar datos en la interfaz de usuario de la llamada REST utilizando Axios. useDispatch / useSelector. donde llamarlo y cuál es incorrecto aquí? Entiendo que tiene que utilizar en lugar de useEffect componentdidmount pero creo que no está recibiendo llamadas de la manera que estoy tratando. Por favor aconséjame...

Antiguo código de clase de componente:

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

Nuevo código que estoy tratando es así:

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:

Creo que se está utilizando useDispatchde forma incorrecta.

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

debiera ser

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

También en el componente basado en la clase, que estaba usando fetchRequests(), pero aquí se está intentando utilizar fetchPortfolioRequests().

actualizar

Su componente funcional debe tener este aspecto:

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

}

actualizar

si desea una vez el envío cuando el componente hace entonces sólo puede utilizar

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