React State vs. Redux State: When and Why?

5 points by mattnedrich 9 years ago | 6 comments

borplk 9 years ago |

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.

aprdm 9 years ago | |

For this specific occasion you could also use the Lift state up pattern -> https://facebook.github.io/react/docs/lifting-state-up.html and it would work just as fine.

I've been doing some React projects for the past 6-7 months and I still haven't had the need to use Redux. I believe you want Redux when your application is really large / complex.

borplk 9 years ago | | |

Yes but it can get pretty noisy when a component that is deep down needs access to some information.

Redux decouples component structure from information access.

This is useful when you have some little button for example that should look different depending on whether the user is logged in or not.

Without redux you will burden each and every component in the hierarchy to manage that state up and down.

With redux that button can hook itself into the state and be dropped anywhere without burdening its parents for any state management.

Philomath 9 years ago |

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.

hobonumber1 9 years ago |

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.

fibo 9 years ago |

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