Is using a mix of Redux state and React local component state ok?
Managing state with Redux is more work comparing to just using this.setState() in your React component. The Action > Reducer > Component cycle can actually be laborious to implement, and sometimes it’s difficult to see the payoff with that process.
When you have made the decision to use Redux, do you have to religiously put all your state in Redux store only? The answer is no, you don’t have to.
It is totally fine to use a mix of React component state and Redux state. You might for example use non-critical UI state inside React components, like if a checkbox is checked or not. The official Redux FAQ has a good list of rules of thumb for determining what kind of data should put into Redux. The FAQ is very good but pretty abstract so here is an extension of that FAQ with some concrete examples.
You should consider putting state in Redux in the following scenarios:
- Do other parts of the application care about this data?
Let’s say you have an app where users can log in. Then you might want to put the username in the state so that you can show the user name in the top of the screen in the menu component. And other areas of the app might find the username useful, for example on a component on the profile page.
- Do you need to be able to create further derived data based on this original data?
If you develop a price calculator for a hotel you might need the user to enter different input like number of children, size of room, etc. Based on these input data, the price changes. The price is derived from the input data. If you have a scenario like this, you might want to consider Redux.
- Is the same data being used to drive multiple components?
If you are writing an eCommerce application you might want the shopping cart in the top of the screen, and also show recommended product based on the content of the shopping cart. The same data (the items in your cart) are used to show two different types of component at different places in your application.
- Is there value to you in being able to restore this state to a given point in time (ie, time travel debugging)?
Time travel debugging means that you can go to a previous state at any point in time by using a plugin to your browser (for example redux-devtools-extension). All previous Redux states are stored and you can “save” any state, to come back to it at any time. This is very useful if you are working on something that requires many manual step to get the application in a certain state. For example if you are working on a PIN verification feature. There are many manual steps: type in phone number, pick up your phone, enter the pin on the screen. It’s very tedious to recreate all those manual steps every time you make a change to the source code. With hot reloading you only have to recreate the manual step once and then reload them at any time!
If you have similar use cases as listed above it might make sense to use Redux.
Remember it is still ok to have parts of the state in the Redux store, and other parts of the state in the component.
Follow me on Twitter to get real-time updates with tips, insights, and things I build in the frontend ecosystem.