Estoy planeando usar axios para llamadas asíncronas y promesas en mis creadores de acciones redux. Actualmente, todavía no hay una API que se pueda usar, así que mantengo las cosas localmente.
¿Cómo puedo hacer que lo siguiente se pueda encadenar desde dentro de un componente de reacción?
creadores de acciones
export function fetchResultsIfNeeded() { return (dispatch, getState) => { if (true) { return dispatch(fetchResults(day, hash)); } else {return Promise.resolve();} }; } export function fetchResults(day, hash) { return (dispatch) => { // Dispatch something here return new Promise(resolve => setTimeout(resolve, 1000)).then(() => { // Do some stuff here // Dispatch some other stuff here as well }); // Want to chain on this promise in react component }; }Reaccionar componente
import { fetchResultsIfNeeded } from 'actions'; // Class based react component checkResults(periodFrom, periodTo) { this.props.fetchResultsIfNeeded([periodFrom, periodTo]).then(() => {/* Do some stuff here */}); } // Connected via react redux export default connect(null, { fetchResultsIfNeeded })(component);Actualmente recibe el siguiente error, ¿puede ser que todavía esté esperando en react-redux o algo así?
Uncaught TypeError: Cannot read property 'then' of undefinedColoque el creador de la acción y el componente en un Pen (de lo contrario, no estoy seguro de cómo mostrar el código completo)
Código de componente completo, código de creador de acción completa
Supongo que estás usando redux-thunk . Debe regresar de la función de resolución dentro de su creador de acciones. El flujo correcto debe ser:
export function fetchResults(day, hash) { return (dispatch) => { dispatch(...).then( ( ) => { // Do some stuff here return dispatch(...) } ) } }Hay más de una forma de hacer esto, pero quizás la forma más sencilla de hacerlo con su código existente es usar bindActionCreators :
import { fetchResultsIfNeeded } from 'actions'; import { bindActionCreators } from 'redux'; // Class based react component checkResults(periodFrom, periodTo) { this.props.fetchResultsIfNeeded([periodFrom, periodTo]).then(() => {/* Do some stuff here */}); } // Connected via react redux export default connect( null, dispatch => ({ ...bindActionCreators({ fetchResultsIfNeeded }, dispatch) }) )(component);