Redux: async and sync dispatches

Question

I have a multi-page user registration form in my react/redux app.

When a user clicks "next page," it dispatches a call to update the user's profile in the local redux store (not the server).

When they click "Submit" on the final page, I currently have a click handler along the lines of:

clickHandler: function(formData) {

  dispatch(updateProfileInStore(formData);

  dispatch(saveProfileToServer());
}

My question is: can I be 100% certain that the Redux store w/ my user profile will update before the second dispatch is called?

I'm worried that in some cases the profile might be written to my database before the last page of form data is added to it.

Mark · Accepted Answer · 2016-03-17 22:35:04Z

2

It's not guaranteed. What you could do is pass saveProfileToServer the new form data have it update state and send the updated form data to the server.

As per the react documentation

setState() does not immediately mutate this.state but creates a pending state transition. ... There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

edited Mar 17, 2016 at 22:35

answered Mar 17, 2016 at 19:45

Mark

3,1631 gold badge20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ruan Mendes Over a year ago

A statement like this should be accompanied by references

Mark Over a year ago

Good advice Juan Mendes.

SCLeo Over a year ago

The OP is asking about redux not react... You might want to double check what the question is asking.

Priya Ranjan Singh · Accepted Answer · 2019-04-30 13:36:11Z

1

The only way to add a synchronous behaviour here is to either use redux thunk or sagas. A redux thunk returns promise that resolves and in sagas, we may have to watch for success action dispatched by updateProfileInStore which needs to call saveProfileToServer.

answered Apr 30, 2019 at 13:36

Priya Ranjan Singh

1,5671 gold badge15 silver badges30 bronze badges

Collectives™ on Stack Overflow

Redux: async and sync dispatches

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related