I'm planning on using axios for async calls and promises in my redux action creators. Currently there is not yet an API which can be used so I am keeping things locally.
How can I make the following chainable from inside a react component?
Action creators
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
};
}
React component
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);
Currently receiving the following error, can it be that it is still waiting on react-redux or so?
Uncaught TypeError: Cannot read property 'then' of undefined
Put the action creator and component in a Pen (not sure how to show full code otherwise)
I assume you are using redux-thunk. You need to return from the resolve function inside your action creator. The correct flow should be:
export function fetchResults(day, hash) {
return (dispatch) => {
dispatch(...).then(
( ) => {
// Do some stuff here
return dispatch(...)
}
)
}
}There's more than one way to do this, but perhaps the simplest way to do so with your existing code is to use 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);