React State vs. Redux State: When and Why?

Redux state is useful for when other parts of the app need to be aware of or react to that state.

Sometimes there are little bits and pieces that may look like they are "private state of a component" but over time you'll find instances where it's useful to know that state.

For example I have a LoginForm component and a SignupForm component.

If you have half-way filled email and password on the LoginForm, but click on "Create an account" it would be nice if SignupForm picked up that state from the login form.

So my LoginForm state is stored in the redux store under the key "loginForm".

And SignupForm will pick up that state if available and vice-versa for going from sign up to log in.

What I like to do is not use Redux at all until I find I need it. So basically it comes a point in my app when I have too much information in my state and I need to share it with multiple components. At this point, I add the most global stuff to the redux store and keep meaningless things as react state.

Use Redux state if you want the data to be available across multiple components.

Use React Component State if no other component cares about the data.

Use both, React for internal component state, Redux for global state that could be serialized.