CODEWITHSUNDEEP
reactjsreduxreact-reduxredux-thunk
bigmadwolf
bigmadwolf

Reputation: 3519

Redux and Redux thunk not synchronous

My assumption from working with redux is that dispatching actions is a synchronous task. 

fire action 1 - > store updated
fire action 2 -> store updated

In a project I'm currently working on, I have a product customizer, that allows some user selection, they can place multiple orders, but if they're only ordering their current selection and select "purchase", I fire "addOrder", adding their selection to the orders array, and then the "purchase" action, which is a thunk submitting the orders stored in redux to my cart API.

I've expected that I would be able to rely on the store being in a consistent state, reliably after each action, and so when that second action fires it would have the state, as it is, after the first regular action fired before it, but no dice.

in my connected component I dispatch each action:

//.... inside component
purchase = () => {
  this.props.addOrder(); // regular action
  this.props.purchase(); // thunk
};
// ... rest of component

Upvotes: 0

Views: 3985

Answers (1)

markerikson
markerikson

Reputation: 67459

Yes, dispatching is always 100% synchronous, unless altered by a middleware. And yes, by default, you can call getState() again after a dispatch to get the updated state:

function checkStateAfterDispatch() {
    return (dispatch, getState) => {
        const firstState = getState();
        dispatch({type : "FIRST_ACTION"});

        const secondState = getState();

        if(secondState.someField != firstState.someField) {
            dispatch({type : "SECOND_ACTION"});
        }    
    }
}

Upvotes: 12

Related Questions