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

Question

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.

Cuckoo

Either wait for the Store to update itself and then fire off new actions or pass a promise around your stores that you can .then() on. – Durante

Publishing some code might be helpful :) – Shipshape