What is Redux?

Redux is a JavaScript library that focuses on managing application state. It’s commonly used in tandem with Angular or React to compose user interfaces. The core value of Redux is to ensure that applications behave predictably and consistently.

Imagine you open a music application and navigate to your favorite playlist. The application fetches the songs, displaying your chosen playlist. You then launch your notes application in order to cross reference a few song titles. When you return to your music app, you will find the app in the same state that you left it in - In this case, with your favorite playlist loaded. Maintaining this state requires help from both the user interface as well as the API.

How does Redux work?

Redux acts as a state container for data. Think of this like any other type of storage container. You organize your items into a storage bin in the manner you find most effective. All of your items are now conveniently located in one place. You can easily check the bin to determine what items are currently stored there. Additionally, you can just as easily perform a small action to change out items within the bin.

Redux operates in the same manner, with the “items” that are stored being data instead. When using Redux, the state of an application’s data is stored in one JavaScript object (the metaphorical “bin”), called the Redux store. While the state is read-only, you can simply define an action that will perform a state change. These changes are executed by a function, called a reducer, which takes in the current state and the described action, and returns the new state.

Why use Redux?

Redux follows the highly performant one-way data flow of React. Whereas passing props can become convoluted and error-prone within a large React application, Redux offers an efficient pattern for storing data, making it much more straightforward to manage and maintain the state of an application. With a little practice, the process of call (dispatching changes with actions) and response (processing those changes through reducers) is easy to implement and very effective.

Wrap Up

Redux is simply a state management tool for JavaScript applications. It’s intended to be a reliable state container that helps devise a consistent user interface. Though not always necessary for building smaller applications, Redux offers three key benefits that are valuable regardless of application size.

First, the store acts as a single source of truth, providing a predictable outcome and resulting in fewer bugs when syncing state. Second, due to the rigid process of actions, reducers, and the store, it’s easier to structure and maintain clean code. Finally, with a pattern consisting of small functions that have a single responsibility and are independent, code is easier to debug and test.