When do I choose React state Vs Redux Store

Question

I've been learning Redux and a part I'm unclear of is, how do I make a determination between using react state vs redux store and then dispatching actions. from my reading so far it looks like I could use React state in place of Redux store and still get things done. I understand the separation of concerns with using Redux store and just having 1 container component and the rest of it as stateless component but how do I make the determination of when to use React state Vs redux store is not very clear to me. Can someone please help?

Thanks!

Answer 1

If the state doesn't need to be shared with other components, or the state doesn't need to be keep when the component is unmounted, then you can just put it in the component's state.

You can think that the Redux store is the database of front-end, if you have something like product data fetched from an API, then the Redux store is the right place; if you have a dropdown component, which takes a isOpen prop, then the parent of that dropdown can just keep dropdownIsOpen as a component state.

For more information, here is the answer from Dan: https://github.com/reactjs/redux/issues/1287

Also you said

only 1 container component and the rest of it as stateless component

This is incorrect. You can have several container components. A container component can also contain another container component.

Answer 2

From book:

First of all, we should always keep in mind that only the minimal amount of data needed should be put into the state. For example, if we have to change a label when a button is clicked we should not store the text of the label, but we should only save a Boolean flag that tells us if the button has been clicked or not. Secondly, we should add to the state only the values that we want to update when an event happens, and for which we want to make the component re-render. Another way to figure out whether the state is the right place to store information is to check if the data we are persisting is needed outside the component itself or by its children. If multiple components need to keep track of the same information, we should consider using a state manager like Redux at the application level.