When To Use Redux

I’m currently working on a React project to help with managing tasks for the law office where I work. I was thinking about just using local component state for the whole project, but the more I get into it, the more I am starting to think that I’ll need to use Redux. In this blog post I’ll go over when you should and shouldn’t use Redux to help manage state in React.

There are two main reasons that I see for wanting to use Redux.

1. You need to use the same piece of state in multiple components. Sometimes you have data that will be passed around to multiple components. In this instance, if your piece of state is uncoupled from a component, i.e. Redux single source of truth, then it’s a whole lot simpler to just grab from Redux for the multiple components that need it. These components may not have a direct relationship so it would be cumbersome to make sure they both have the same data. My next reason expands on this.

2. There are too many props that are being passed down through multiple components. This ties in directly to the first reason. It’s so much easier just to have Redux be tied into a lower level component than it is to pass down props from the top of your app to the bottom.

There are other reasons for using Redux in a component besides these two, but these are probably the most common ones.

Conversely, let’s look at why you’d want to use local state and not have Redux in a specific component or at all in your app. The main reason for not using Redux is when components have state that no other components care about. An example of this is a toggle element. If it has state that specifies when to be toggled or not, there probably aren’t going to be other components that need to know that data. So here just using local state and setState() in a function to do the toggling will more than suffice.

Also along those same lines, if you have a form element, the parent form component can house the local state and just pass it down to its children components. This works because there aren’t going to be other components besides direct children still pertaining to that form in the state tree that don’t need that state. It is also likely that there will only be one or two levels of components for the props to be passed down through.

I personally like the approach of not using Redux until I actually need it. Granted, sometimes when going through the planning stages of building an app it’s apparent that there will be components and state that would work better with Redux. In this case definitely start out with Redux, but just don’t over use it.