A "flow" way to handle success / errors in the user interface
Take the case of password reset. The user is presented with a form in which they are prompted to enter their email address. They submit a form to send a reset link in an email. The view fires an action, the action POST on /api/password/reset
and returns success or failure.
Obviously I want to update the interface so the user knows what is going on. The Flux way is for actions to send a constant, for example. PASSWORD_RESET_SUCCESS
and keeps listening to the dispatcher so they can change state. Components listen to stores, so they change the UI when the store state changes.
In the case of a password reset, I really don't see a sane way to get this run through the store (and it seems like there is so much). The only state change seems to be directly related to this form / component. Nothing that needs to be saved after the user has left this page.
- Is it "flux-y" for components to listen directly to the dispatcher?
- Is there a sensible design for the store that allows me to handle generic events like this that aren't directly related to the models in the app?
Many thanks!
(This refers to work on https://github.com/mwillmott/techbikers in case anyone is interested)
source to share
- No, it is not. The Flux architecture should always follow the same scenario - Component calls actionCreator, ActionCreator dispatches actions to repositories, saves emits changes for all signed components. This is how Flux works, explained here .
- I think the best way to do this is to have a generic ResultStore that just takes the key / value defined in the action and writes it to a hash. This way you can get away with a single handler, named onResultWrite or something like that. Flux Stores were never meant to represent your models directly - rather, they represent your application state.
The Flux architecture may seem too strict and complex for a simple application - and it is. But it was not designed for simple applications, it was designed for a complex user interface with a lot of components - as complex as get. This is why stores, activities and components should be separated from themselves as much as possible.
If you think your application is pretty simple, you can always use shortcuts, for example, pass the changeState callback directly to the action as a parameter, but if any other component needs to respond to the PASSWORD_RESET_SUCCESS event, you have the problem itself. You can always think about it when it happens. The project architecture is always about tradeoffs, flexibility and development speed and productivity.
The most important developer skill is knowing these trade-offs, their value, and knowing where to create them and where not.
Good luck!
source to share