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 :
- When the user submits the form, I call an action
- The action sends a request to the server
- The action is registered by the authentication store that updates its currentUser
- The component has a currentUser prop and uses componentWillReceiveProps to check if this prop changed and call an action to request the list
- 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.