Why And When You Should Use Redux

We’ve written before on this blog about why we think JavaScript is (still) the language of the future despite being around for more than 25 years. One of the key reasons is the huge community of developers that support it, creating a rich ecosystem that is continually expanding and evolving. This means a wealth of tutorials, libraries and frameworks that solve problems, add functionality, and generally make it easier for developers to learn and use the language. 

One of these JavaScript libraries is Redux, which is used for managing and updating application state. What does this mean? Well, each component in an application will have a ‘state’ at any point in time, and this changes as users input new data or execute commands (clicking a button, opening a dropdown menu, etc). When an update in component state occurs, this information needs to be passed to other linked components or subcomponents so that they can behave as required. Imagine your web application has a dark mode feature - all other components in the user interface (UI) must know when the dark mode is enabled so that they are rendered in the right color.  

As soon as an application becomes even moderately complex, it becomes unwieldy to pass these state parameters and properties between all the components (typically via a process known as prop drilling). This is where state management tools come into play, enabling developers to view, control and synchronize the ‘global state’ of an application across all of its components. 

Redux creates a single ‘data store’ for managing state that can be accessed throughout the entire application. Redux essentially makes it easier for developers to understand when, where, why, and how the state of an application has changed, and gives confidence that the application will behave in a predictable manner when it does.

After its launch in 2015, Redux grew in popularity as a simple and lightweight solution for state management when building with React, the dominant front-end framework in the JavaScript ecosystem. However, it can also be used with other JavaScript frameworks and libraries such as jQuery, Angular, or Vue. Based on usage, Redux is the most popular library in the ‘data layer’ category of the latest ‘State of JavaScript’ developer survey.

Benefits of Redux

• Centralization: Redux strips away responsibility for state management from each individual component and puts it in the hand of a single store that holds data from anywhere in the application. As a result, there is no need to write cumbersome code to pass data through multiple levels of components. Moreover, having a single store to manage the global state of the application makes it much easier to visualize and understand data flow and how it will affect behavior. 
• Predictability: Ensuring predictable outcomes is at the core of what Redux is about. Its predictability is determined by its three core principles.

Redux also has strict rules about how code should be organized, which helps when it comes to maintenance. 

• ‘Time-Travel Debugging’: Because Redux logs all actions and states over time, it is simple to trace any bugs that emerge. You can also take debugging to the next level with Redux DevTools, which allows you to skip backwards and forwards in time to inspect the state of the application at any point. DevTools include a number of other powerful features that can maximize the usefulness of Redux. 

When to use Redux

The same ‘State of JavaScript’ survey shows that satisfaction levels among developers using Redux have declined from 93% in 2016 to 67% in 2020. This is in part due to concerns that Redux may be unnecessarily complicated for some applications - some considered it an over-engineered solution to a relatively simple problem. A recent ‘State of Frontend’ survey also found that in 2020 more developers were using React Context API and hooks for state management rather than going with Redux (though it was still used by around 48% of respondents). 

This just underscores the importance of knowing when to use Redux. The library’s own website includes the disclaimer, in bold: 

“Not all apps need Redux. It's important to understand the kind of application you're building, the kinds of problems that you need to solve, and what tools can best solve the problems you're facing.”

Using Redux for state management implies a trade-off. It introduces complexity, indirection and constraints into your code, which can be frustrating if there is no good reason for doing so. Using Redux also means learning how it works, which again could be a waste of time if you don’t need it. As a rule of thumb - and one shared by one of Redux’s creators, Dan Abramov - you don’t need to use Redux unless you’re unable to manage state within React or other front-end frameworks you’re working with. 

Keeping this in mind, here are some scenarios when Redux might be the best solution:

• When multiple components need to access the same application state. For example, once a user logs in to a personal account on an application, the information about that user needs to be shared with a range of components that may not interact directly. In this case, Redux’s single store is an optimized way to map a state across components. 
• When you’re working on a large application with several other people. Again, the Redux single store becomes more beneficial as the complexity of an application increases. If many people are working on it (and you don’t have an alternative system for sharing information), then Redux can also help keep everyone on the same page. 
• When application state is updated frequently. This often implies consumer-facing applications, where there is a lot of user interaction (for example, adding goods to a basket, then removing some, going through the payment process, etc). 

Whether you need Redux or not, if you want to add experienced and trustworthy developers to your IT team, get in touch with us at Jobsity. 

--

If you want to stay up to date with all the new content we publish on our blog, share your email and hit the subscribe button.

Also, feel free to browse through the other sections of the blog where you can find many other amazing articles on: Programming, IT, Outsourcing, and even Management.