CODEWITHSUNDEEP
javascriptreactjsredux
NealVDV
NealVDV

Reputation: 2540

Chaining redux action creator Promise.then() in react component

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)

Full component code, Full action creator code

Upvotes: 4

Views: 6350

Answers (2)

Jeff McCloud
Jeff McCloud

Reputation: 5927

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

Upvotes: -1

Alex Moldovan
Alex Moldovan

Reputation: 2366

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(...)
             }
        )            
    }
}

Upvotes: 0

Related Questions