Store it into React state or Redux state?

javascript, React

ref – https://spin.atomicobject.com/2017/06/07/react-state-vs-redux-state/
https://stackoverflow.com/questions/39977540/can-redux-be-seen-as-a-pub-sub-or-observer-pattern

React state

React state is stored locally within a component. When it needs to be shared with other components, it is passed down through props.

In practice, this means that the top-most component in your app needing access to a mutable value will hold that value in its state.

If your top most component needs access to a value that is changeable, you need to hope it in React state. If this state is shared with other components, it needs to be passed through props.

If it can be mutated by subcomponents, you must pass a callback (into the subcomponent) to handle the update in the top-most component.

If your children components need to change this value, your parent component should pass a callback into your child component. That way when the child component changes the value, it can pass it back up to the parent component so it can update it. That way, the parent component is not holding the old value, while the child component has the newest updated value.

Redux state

The need of something like Redux when you have a more complicated application, with top-level components that need to talk to each other (actions) and somehow share some state.

Any component that needs access to a value may subscribe to the store and gain access to that value. Typically, this is done using container components. This centralizes all data but makes it very easy for a component to get the state it needs, without surrounding components knowing of its needs.

Redux is a library to manage shared state between components and to coordinate state mutations. Redux uses a pub/sub pattern.

It has a subscribe method that is used by components to subscribe to changes in the state tree. Normally you don’t use store.subscribe directly, as the Redux-React bindings (Redux’s connect basically) do that for you. The store then emits the changes.

Consider also that it’s perfectly fine to keep using the components internal state together with Redux. You can use the internal state to store state you don’t need/want to share with other components.

Some Guidelines on where to store state

Duration

Different pieces of state are persisted for different amounts of time. I loosely categorize time into these groups:

Short term: data that will change rapidly in your app

Short term data will likely change rapidly. At the simplest level, this includes the characters present in a text field as the user types. I would also extend this to include data in an entire form; this data can be considered a work in progress until the form is submitted. This type of data can be stored in local React state. I would even include things like how to filter a list of items, and whether or not to show or hide completed items in a to-do app (assuming it is not tied to user preferences).

Medium term: data that will likely persist for a while in your app

By medium-term state, I mean state that will stick around while the user navigates your app. This could be data loaded from an API, or any changes that you want to be persisted up until a page refresh.

However, after submitting a form, I would store the state in the Redux store. As an example, if a user submits a form updating their profile information, it would make sense to store this in Redux.

Long term: data that should last between multiple visits to your site

This is state that should be persisted between refreshes of the page or between separate visits to the page. Since the Redux store will be created anew when refreshing, this type of data should be stored somewhere else (likely to a database on a server or into local storage in the browser).

Breadth of Use

Another consideration is how many components in your React app need to access the state. The more state needs to be shared between different components in your app, the more benefit there is to using the Redux store. If the state feels isolated to a specific component or a small part of your app, React state may be a better option.

Depth of passing down props

React state should be stored in the most top-level component for which a subset of its subcomponents will need access to the state. Sometimes, this can mean many layers between the component storing the state and the subcomponents that render the data, and each layer means another prop must be propagated down the virtual DOM.

Parent-to-Child prop passing and callback propagating works great if you only need to pass the state down one or two levels into the subcomponents. But beyond that, it can feel tedious and require edits to many components every time you find a subcomponent needs access to new state. In cases like this, I find it much easier to store the state in Redux and use a container component to pluck the desired data from the store.

Unrelated components needing the same state

It could also be that multiple, relatively unrelated components need access to the same state. Take the above example of a form to update a user’s profile. The component here should receive the initial user profile in its props. You might also have a header component with a subcomponent that displays the user’s username or related data.

You could, of course, take passing down props to the extreme, in which your top-level component knows about the user’s profile and passes it to the header, which passes it to a subcomponent (and maybe further), and also passes it down to the profile-editing component. However, this requires a lot of management between the whole virtual DOM.

This type of solution is solved much more cleanly by storing the profile in the Redux store, and allowing container components around the header and profile-editing component to grab data from Redux’s store.

Ability to Track Changes to the State

Another time to choose Redux is when you need to track changes to state:

  • Maybe you want to replay events.
  • Maybe you want to implement undo/redo in your app.
  • Maybe you just want to log how state is changing.

In cases like these, Redux is a great solution; each action that is created is an artifact of how the state changes. Redux makes all these tasks simpler by centralizing them in a single store.