3 ms·
You've hit on the core idea, which is to make all data flow in one direction. Data passes down from the state manager to individual components, and then from th
by asolove 12y ago
You've hit on the core idea, which is to make all data flow in one direction. Data passes down from the state manager to individual components, and then from those components back through the state manager to then go back and update the UI, etc. The hypothesis is that this is better than a style where you do pervasive two-way binding because you have a single point for managing all your data, validations, errors, undo/redo, etc. which are hard to manage if data changes occur at lower levels and have to be synced.
As for how you get the change request from your low-level component to that one place, there are a few options.
- Pass callbacks down to lower-level components in their props, as you show.
- Pass lower-level components a data structure that knows how to update itself within the larger data structure (a cursor, as used in Om)
- Allow components to issue change requests that get interpreted by the state manager. (See this article on how you can do typed change requests in Elm: https://gist.github.com/evancz/2b2ba366cae1887fe621 https://gist.github.com/evancz/2b2ba366cae1887fe621)
- prapam2 12y agoIf a user is editing a model then temporary changes would be stored in statemanger as well? If the user then decides to cancel the changes how would the app revert back to previous changes?
- dugmartin 12y agoThe fourth option is to use a global message bus which each component can post messages to. Data still flows down but the need for wiring callbacks is removed - each component in the tree just posts a message that is handled by whichever ancestor component owns the state mutated by that message.