Redux. Understanding the general idea
What is Redux and why should you care?
Redux is a library for managing the global state of your application. In this article, I will explain a different approach to understand the general idea of the flow followed by Redux. Redux is a widely used library and if you find yourself having to deal with this in your first job after you only had built one CRUD, this article may help you a bit.
Building the Store
Imagine that you have a problem with the state management of your application. For instance, you have a lot of states, and you want to manage them in a single place. Redux has a place for that and the name is “store”. The store will be your single source of truth. Let’s build our own.
We have two objects, the state, and the Store. The state object will be the initial state of our application and the Store will keep that and make it available to our whole application, through something called Provider, that we will not get into the detail in this article.
Creating some dispatchers
In Redux, we have something called a dispatch. But what is a dispatcher? You may ask. Well, a dispatcher is an event trigger. He will pass an action to our store. Let’s understand this
So, addNumberDispatch and decreaseNumberDispatch are two dispatchers that will send an action to our store, which will run a reducer function. For now, just hang in there. First, we build our store, now we have our event trigger and one action inside. Every action comes with a type and maybe can come with a payload. The type attribute refers to the type of the action (in our case to increase or decrease) and the payload is a naming convention to represent the payload of the action (see a discussion here) in our case is 1.
Dispatching an action and “activating” a reducer.
That’s a chunk of code, let’s go in small steps. Redux requires immutability [About redux immutability] so I’ve created a variable called newState to help us with that. The constant dispatch is referring to the “action” that we will dispatch to our fake store. And the switch represents our reducer logic. What is happening is that when a function is dispatched, our reducer will receive the state and if needed will update the initialState by “calculating” the new state based on the state and the action.
So our “reducer” will receive something like
- Hey man, this is your current state changed based on this action “add” where “counter” is now 1. Now after we dispatch an action that “calls” a reducer that destructs our old state into a new one, updating it and returning this new state we have that our counter will now be showing this.
Result
After this, if we want to increase our number one more time we would call addNumberDispatch but now our state would be {counter: 1}, after the reducer copy this state into a new object updates it, and returning the new one our new state would be {counter: 2} and so on…
That’s it!
I hope you like it and if you want to know more I have some links for you.
