Imagine a calendar app. One part of the app lists all of the events. Another part of the app sets filters on which types of events are shown. A third part of the app sets the current time zone and a fourth part creates new events. Whew, that’s a lot to keep track of!
In React, each of these “parts” would be a component and data would need to be shared and updated by these components. Developers call this shared data the state of the application. Meanwhile, the process of sharing and updating this state is called state management. Depending on the size and complexity of your state, state management can be a complicated process in plain React.
That’s where Redux comes in. Redux is a state management library that follows a pattern known as the Flux architecture. In the Flux pattern, and in Redux, shared information is not stored in components but in a single object. Components are just given data to render and can request changes using events called actions. The state is available throughout the application and updates are made in a predictable manner: components are “notified” whenever a change is made to the state.
To put it another way, here’s the description from the Redux documentation: “The patterns and tools provided by Redux make it easier to understand when, where, why, and how the state in your application is being updated, and how your application logic will behave when those changes occur. Redux guides you towards writing code that is predictable and testable, which helps give you confidence that your application will work as expected.”
There are similar tools like Recoil, MobX, and Apollo Client, but Redux is the tried-and-true tool for state management in React applications. It’s more popular in the developer community and it’s well supported with documentation and online tutorials.
This diagram shows an imaginary calendar application and all of the data, or state, informing its display.