React Js - Managing the State in a Stream
We are developing a time tracking client in React JS using the FLUX architecture and are wondering if all the state of the application should be in a single state object.
- so that the parent component can get the state on change and pass it to the child components via props
or
- each component must have its own state object, so when a state change is triggered from the store, they can individually request their state and
setState
.
source to share
You should try to push the state as far away from the hierarchy as possible. So, you must approve of having stateful parent components and passing data to stateless (pure) components. This makes the application easier to understand since most of the state is in one place. You don't need to have just one stateful component, but stateful components should be as far away as possible.
But note that there is a difference between the state of the application and the state of the UI. UI state is things like "this search input box currently contains an x value" or "the user has toggled a button to only see data from today." And the user interface must live in components that need and manage this state.
Application state is your application data, data that needs to be saved. And you should absolutely strive to centralize the management of this.
source to share
Also check the thread comparison repository - https://github.com/voronianski/flux-comparison
It contains useful flow patterns such as stateful containers and pure components.
source to share