Redux is a JavaScript library that is used to manage state that gets created when you use React to build applications. You can use Redux with Angular as well but for this article I will be focusing on React components and how Redux helps manage their state.
In the Redux docs the official description of Redux is:
“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.”
Say you were building an app using React let’s say a calendar app as an example. In this app you would have multiple parts such as events, filters, and new events. Using React each of these parts would be their own component. And they would have to talk to each other using State. Even for a simple app such as this example the State can easily get complicated fast, and in real world situations you will have more than three states. This is where the state management library Redux comes in. Redux makes it so that instead of each component having its own state and having to pass it down, the State will be stored in a single object. The State is available to every component saving us potentially messy situations down the line which can occur in large apps and the process of passing down State.
Apps are made up of three parts the State which is the data of the app, the View which is what is displayed to the user, and Actions which is what the user does to change the State. In the app the flow of these three parts goes as follows the State is the data what the components of the app currently contain. The view will show this data to the user, and when the user interacts with this data such as clicking a button then the State will be updated and view will display the new State.
In React these three parts overlap since the components are responsible for not only holding state but also rendering it. When an action is taken the component will update State and itself to update the view. And when one component is updated it has to relay this information to the other components that it is linked with.
Redux provides separation between these three parts by making it so that the State is stored in a single source. The components then send requests to this single source depending on what actions are taken based on the user actions made in the view. This makes our code more readable, and maintainable.
Redux makes one way data flow from State to View to Actions as shown in the diagram below, and the flow will always be in this direction.
