Although you can use Redux with different frameworks and libraries, it is most commonly used with React.
Redux can be complicated. There are a lot of boilerplates being juggled in your project in order to do a very simple thing. However, a lot of developers use Redux because when you have a large scale application you are going to need some state management tool, and Redux is the most popular of its kind.
Before we deep dive into Redux, for those of you who have no idea what an application ‘state’ is, it is any data that is needed to create the application UI at a certain point in time. For example, for a checkbox the ‘state’ is a true or false value for whether or not it should be checked.
Now that you know what the state is, let's see what Redux is.
Imagine that you are a customer of three banks and within each bank, you have two accounts – these are six accounts that you manage. Or, in React language, six components that contain information about the account balance, purchases made, amounts received, etc.
Without Redux to receive information about the account status or to deposit money, you have to go to each bank separately. However, with Redux you don't have to go anywhere. Because Redux takes control of the information and actions of your accounts (‘state’) away from the banks (React components) and gives it to a centralized place called a ‘store’.
Each time you want to get information about the status of accounts or perform transactions with funds, you will ask the ‘store’, which helps to keep track of all account information and perform transactions (the different states of the application).
Why do we need Redux? What problem does it solve?
As we have seen before, Redux makes state management much easier. Why is it hard to manage a state?
“Managing a state in a small application is fairly straightforward. In a complex application when you have multiple components and you have to pass a lot of things, it becomes really difficult to manage. That’s when Redux comes into play.”
Let’s return to the example with bank accounts. If you have six accounts, then maybe you will still be able to track them manually, but what would happen if you had 20 accounts and six of them were in different countries? Things can quickly get out of control. In this case, a centralized system like Redux will make your life much easier.
As we already know, Redux is a centralised store that holds the entire state of the application. Each component has access to the store and all the steps that change the state are done through this store. Redux mainly consists of three parts which are referred to as “store”, “reducer” and “action”. Let’s briefly discuss what each of them does.
Redux “store” is a centralised place that holds the entire state/data of the application. This is where the application, for example, saves your username to use it in different areas. And the only way to change the state stored is to go through a “reducer”.
Redux “reducer” is a function that describes how the application´s state changes and returns a new state. But how does it know which part of the state to change? That’s where “action” comes into the picture.
It is important to learn React before you even start with Redux. React and Redux are very good matches when used together. Redux has a very well explained guide that can help you get started. Check it out here.