Why do we move our persistent state into a database, rather than letting each of our backend components manage their state in separate files?
Because it makes it much easier to query, debug and serialize our overall application state.
Redux was inspired by a language called Elm, which also promotes the use of a single model. Elm's creator has a further justification on why that's an important quality for applications.
There is a single source of truth. Traditional approaches force you to write a decent amount of custom and error prone code to synchronize state between many different stateful components. (The state of this widget needs to be synced with the application state, which needs to be synced with some other widget, etc.) By placing all of your state in one location, you eliminate an entire class of bugs in which two components get into inconsistent states. We also think you will end up writing much less code. That has been our observation in Elm so far.
I found this concept much easier to learn and understand whilst tackling it from ClojureScript's Re-frame and watching David Nolen's videos on Om Next. The Re-frame README for the project is also a great learning resource.
Here are some of my personal takeaways for why global state is a more elegant solution.
Simpler Components
A common scenario that arises in many stateful component based applications, is a need to modify state that lives in another component.
For example, clicking on an edit button in a NameTag
component should open an editor which allows the user to modify some data which lives in the state of a Profile
component (a parent of NameTag
). The way to solve this problem is to pass down handler callbacks, which then propagate the data back up the component tree. This pattern results in confusing sub-data flows within the existing one way data flow of React applications.
With a global state, components just dispatch actions which trigger updates to that state. Both components and actions can be parameterized to send contextual information back to the user (e.g. what's the id of the user whose name should I am editing).
You don't have to think much about how you're going to communicate changes to the state, because you know exactly where the state is, and actions are the predefined mechanism for sending those changes there.
Pure Functions
When your application state lives in a single location, the components that render it can be pure functions that take state as an argument. They just look at the data, and return a view that can dispatch actions to make updates.
These functions are referentially transparent, meaning that for any given set of inputs, there is always the exact same output. This is ideal for testing and you end up with components that are straightforward to test.
Serialization
In a traditional React application with stateful components, serializing the entire application state would be a nightmare. It would involve traversing the entire component tree and extracting the state value from each component, before collecting them all in a data structure and encoding it.
Re-inflating the components with a serialized state would mean a similar procedure, except you'd also have to figure out which types of components were responsible for which data, so that you could accurately recreate the component tree. This would also mean storing additional info about the component types in your state.
With global state, you can simply encode and decode it exactly where it is.
Undo/Redo
To implement undo/redo with global state, you need to store states in a list, rather than replacing the last one when it updates. An index pointer can control the current state you are at.
With stateful components, this would require each component to implement this mechanism. Not only is this a lot of extra work, but it also creates another point in your application for bugs to be introduced. The best code is no code, as they say.
Action Playback
In Redux (and the Flux pattern in general) we can keep track of the actions that have been played, then play them back in another context to produce exactly the same state.
If you introduce component local state, then you can say goodbye to this. Updates to local state can come from DOM event handlers, network requests, asynchronous operations (and much more). These operations can't be serialized, meaning that they can't be played back either.