React - Authentication process : Cannot dispatch in the middle of a dispatch

369 Views Asked by At

I have started to play with react via flummox, react-bootstrap and react-router. I am trying to create a basic isomorphic CMS out of it for my websites.

Context :

In terms of authentication, each user has a list of capabilities and each component uses a method of my authentication store "can" to be displayed or not, etc...

I have a user navbar on top, visible on every page handled by reat-router, with a signin/out button that basically displays on click a Modal with a signin form if the user is not logged in else a logout confirmation.

When a user logs in, I want the components on the page that is currently displayed to be updated ( Same for logout ).

Here is an example with a page that displays a list that can only be viewed by an authenticated user with the proper rights :

Process :

  1. When the user submits the form, I call an action
  2. The action sends a request to the server
  3. The action is registered by the authentication store that updates its currentUser
  4. The component has a currentUser prop and uses componentWillReceiveProps to check if this prop changed and call an action to request the list
  5. the action is registered by a store that updates its items

Problem : Cannot dispatch in the middle of a dispatch

Hack : Second action is put in a setTimeout

Questions : I read a lot of answers about this particular problem and it is said to be bad design to call two actions during the same dispatcher cycle. So my question is : is there a better way to design this process?

P.S. : I can publish some code if necessary.

0

There are 0 best solutions below