4 Benefits (and 1 Downside) of React Redux

I am currently in the middle of building my very first project involving React Redux. Accordingly, I’m still learning the ins and outs of Redux, but I’m already seeing how beneficial it can be.

For the unfamiliar, Redux is a JavaScript library for React projects designed for maintaining state in a centralized location. If you’ve ever typed “useState” before, then you already have a surface-level idea of what Redux can do for you. Maintaining state can be a tremendously messy and complicated process, especially if you’re juggling dozens of components and if you have a lot of different states to keep track of.

For context, my current project is a game that I’m building with React and Python. It involves quite a few variables that need to be accessed from several components and need very frequent updates as the game is played. That is why it felt like the right project for my first foray into Redux, but it also helps to highlight where Redux might not be the right fit for your project.

Downside — It might be more work than it’s worth

Redux will save you a lot of headaches if you’re working on a large project and need to maintain state for a large number of variables, but it won’t necessarily save you time when it comes to typing code. If you only need to maintain a handful of variables, you can do so reliably with useState and you will type a fraction of the lines that you would otherwise need with Redux. Redux requires several lines of code to set things up for each individual variable (to be fair, it’s not a crazy number of lines, it’s not terribly complicated, it’s just more lines than you would need with useState). Redux would work with any React project and if you get used to it then you might be inclined to use it regardless of the size of the project, but if the project is small enough in scope then Redux can force you to do a lot more typing without any notable difference in the functionality of your app.

Benefit 1 — Centralizing the variables

One of the bigger headaches with useState (especially for people like me who are still fairly new to coding) is that it can be difficult to decide where to set up your variables. Knowing in advance which components will need which variables or may need to be responsible for updating state can be challenging. Of course with proper planning, you’ll know which components should be responsible for maintaining things and passing them down to child components, but even with a thorough plan, your needs might change over time as the project grows and new features are added. Redux eliminates that from the equation.

With Redux, one central location is used to establish and maintain the application state. Imagine the simplicity of setting up every state in your primary App.js file, knowing exactly where to find everything you need (or where to put it in the first place), but without the messiness of cramming all those lines of code into that file. It serves to clean up your React components substantially.

Benefit 2 — Simple imports instead of passing things down to child components

So let’s clean things up even more! Passing things down to child components (and to their children, and their children’s children) is tedious at best and can create bugs at worst. Let’s say you’ve got one typo somewhere in the middle of a long chain of passing from parent to child. Good luck finding the one place where you accidentally pluralized the variable name. Ok, so it’s not the most difficult thing in the world, but it’s annoying. Plus, if anything is just passing through a component without actually being used within that component, you can run the risk of using or updating state in places where you never intended to, particularly if you’re not careful with your naming conventions (speaking from experience here).

With Redux, you simply import the variables and setter functions into the components you need. Nothing ends up in a component that doesn't need it and you don’t need to involve the parent components at all. So in addition to cleaner code due to centralization, Redux also simplifies the process of distribution to components.

Benefit 3 — More specificity in your setter functions

With useState, the setter function is pretty broad. It is not at all descriptive of what you’re doing to update state. For example, you may have somthing along the lines of const [price, setPrice] = useState(9.99). If you’re on a completely different component that also uses setPrice, it can be hard to remember what conventions you’ve been using to maintain and update things in a consistent way. It can also be difficult for an outsider to look at the code and know what it does at a glance.

Redux lets you create multiple setter functions with different names that can allow you to be very descriptive and clear. Instead of simply setting the price, you can decreasePriceByPercentage(20) or raisePriceByWholeDollars(6) or even raisePriceByThenLowerPriceByThenRaisePriceAgainBy(3, 14, 15) if you really wanted to.

That is an obviously silly thing to do, but the point is that you can create all sorts of setter functions which can be very descriptive and can take/use any number of arguments to update state in specific ways. Could you avoid Redux and just write a function within your components that updates state in a specific way with a more descriptive name? Of course, but Redux does it in a way that also won’t clutter up any of your components since all of these functions are set up in a separate centralized location, plus none of these functions will ever need to be passed from parent to child. You set up all of these functions on what feels like a functional “backend” so they’re out of the way.

Eliminating the generic setter like setPrice in favor of these more specific setter functions also helps to ensure that you don’t alter state in unintended ways. Maybe you never actually want to set the price to a specific number, for example you may only ever want to increment or decrement from the current price. With setPrice on its own, the current context is irrelevant, so if setPrice() exists within your code, you may accidentally use it in a way you didn’t intend. But with Redux, you don’t even need to create a setPrice function at all. You can set up specific setter functions that change state in only the specific ways you want, such that it can never be set without the current context as a factor.

Benefit 4 — Redux DevTools Chrome Extension

The Redux DevTools Chrome Extension is an outstanding tool to make things even easier for you. It has a very clear and easy interface that shows you every state in real time. Do you write console.log() a bazillion times? And worse, do you frequently find that console.log() gives you unexpected results because you haven’t taken a break in 5 hours and you put it in the wrong place (speaking again from experience)? This browser extension eliminates the need for console.log() (for state at least) because you’ll be able to see everything you need all the time. You can even rewind the user activity to see how you got from A to B to C. This is great for debugging.

In short…

Redux has made my code cleaner, easier to read, easier to manipulate, and easier to troubleshoot with the context of a project with a lot to keep track of. It’s not right for every project, but it may be worthwhile to keep using it even for smaller projects so that it isn’t as daunting when approaching larger scopes.