CODEWITHSUNDEEP
reactjsreduxreact-reduxredux-thunk
covfefe
covfefe

Reputation: 2675

React/Redux how to wait for dispatched action to complete?

In my thunk, I have two dispatches in an array called dispatches which modify the Redux store. Only after both of them have completed (i.e., modified the Redux store), I want to dispatch finalDispatchCall. I tried putting them both in a Promise and called then, but I still see the finalDispatchCall being made before the secondDispatchCall has updated the Redux store.

const dispatches = [];
dispatches.push(dispatch(firstDispatchCall());
dispatches.push(dispatch(secondDispatchCall());
Promise.all([...dispatches]).then(() => {
 dispatch(finalDispatchCall());
})
.catch(error => {
 logger.error(
  `Print out error - ${error}`
 );
});

Is there a way to make sure a dispatch has completed before calling another dispatch?

EDIT (more details):

The firstDispatchCall is making an API call (returning fetch) and dispatching an action in the then statement to update the redux store. The secondDispatchCall is also making an API call (returning fetch) and dispatching two other actions in their then statements which each make their own API calls and dispatch actions to update the redux store.

I want to wait until all of this is complete before making that finalDispatchCall.

Upvotes: 2

Views: 11570

Answers (2)

ShrutiLatthe
ShrutiLatthe

Reputation: 71

dispatch(
          deleteEventDeteailsThunk({
            id: deletedIdEvents[0].id
          })
        )
          .unwrap()
          .then((resp) => {
            // handle result here
            res(deletedId);
          })
          .catch((err) => {
            // handle error here
            res({});
          });

for reference :Redux toolkit thunk wait for state change

Upvotes: 1

XML
XML

Reputation: 19498

As long as firstDispatchCall() and secondDispatchCall() are sync, then redux guarantees that they'll arrive synchronously, in sequence, and that subsequent calls to dispatch() will act upon the updated state. But, if you want to be absolutely certain, you can use store.subscribe(), to kind of procedurally await all the changes you're expecting, and read the store on each change to confirm they're all there. This will actually be essential if first and second DispatchCall are async.

But, the question is whether you really need to know, from that specific thunk, when all the dispatches have landed. Redux is an event bus, and as such offers many ways to skin the async cat. It might help to understand more about the problem you're trying to solve by waiting for these dispatches in order to dispatch the last one. It may be that you don't really need to do that...

I recommend reading the Redux team's take on this exact question: "Should I dispatch multiple actions in a row from one action creator?". Especially note there:

"In general, ask if these actions are related but independent, or should actually be represented as one action."

Newcomers to Redux often use multiple actions for what could be a single action, because they forget that multiple reducers can all listen to the same action.

Upvotes: 2

Related Questions