Search code examples
javascriptreactjsreactjs-fluxflux

React Js - State Management in Flux

We are developing a time tracking client in React JS using the FLUX architecture and wondering weather the entire application state should be in a single state object.

  • so that the parent component can obtain the state when there is a change and pass it down to child components through props

Or

  • each component should have its own state object so when a State change is fired from the store, they can individually request their state and setState.
Solution

  • You should try to push state as far up the hierarchy as possible. So you should favor having parent components be stateful, and passing down data to stateless (pure) components. That makes it easier to understand the application, since most state is in one place. It's not necessary to have only one stateful component, but the stateful components should be as far up as possible.

    But do note that there's a difference between application state and UI state. UI state are things like "this search input box currently contains the value x" or "the user has toggled a button to only see data from today". And the UI state should live in the components that needs and manages that state.

    App state is the data of your application, the data that needs to be persisted. And you should absolutely strive to centralize the management of that.