Core Concept of Redux in theory

When we are making some application or for a learning purpose or for a project there comes a time when that project starts growing. It develops lots of states, every component has its own state, the whole application has its own state which we need to manage. Whether the user is logged in or not, what has been saved in data, every single thing which is presenting in front is our current state.

Now you must say what the state is. Let me explain it to you by small example, You are now in a learning state, your mind is in a learning state right now. Your eyes are watching, right!

Relating programming to your real life will help you to understand the programming efficiently. If I talk about your state right now? Right now your state is that you are reading.

Now let's talk about what is the need, when we talk about react-redux, redux flux, or any other libraries, why do we need them? The answer is if you are managing your state locally, then your application is not 100% predictable. The meaning of predictable is that you don't know the state which has changed, from where it has changed exactly, and who has changed it. Also, you cannot undo or redo it. But redux gives us this facility.

Our actions, our state, whatever I have done whether the page has loaded or anything, there are some changes happening in the redux and in the application.

What redux does is, redux makes our state change predictable.

So here we can see our first point predictable. that behaves consistently which means our predictability has increased. we know where the changes are happening.

Centralized, the second point is centralized.

What does centralized mean that the whole store of our application is in a central place. Now you must say what is store? the store is not a different thing. The store is the same state the combination of states is called the Store.

All the states of all the components of the whole application combine to form a bigger central place that is controlling our application is called Store.

Now if we talk about Debuggable. that means that we can debug very easily why?

Because with the help of Dev tools of redux which we can find in Chrome, we can easily understand what actions have been dispatched in our application and time travel, right, the facility of time travel is the best facility. We can check states by going backward. For example, we listen to a song by rewinding or forwarding them, similarly, We can check all the changes made in our state by rewinding & forwarding our application. So these facilities if we make a central store context, then we do not get these facilities easily and effectively.

Now let me show you a flow, what is this actually! there are some important things which we need to understand.

I have talked about Store earlier, you can see it in the image also. Store is the central state of our application in which we have maintained all the states of our components.

So store contains states, State defines UI, that means we have used state to make UI. For example, If the state is running, how our legs will look like, they will look like running.

The next point is actions, when we are on the UI, then here is a point that UI triggers actions then this action means that we have to do it.

So if we talk about redux, there is one important point about redux, that we do not change state directly. Then how will the state change?

If in my application, there is one component that looks normal. But I want that there should be an action that when I click the button, something should get highlighted. This means that a change has happened in the state of that particular thing. Now, how the change happened?

What we do is bind our UI to the state. Now if the state needs to be changed then who will change it and who will speak to do the change. What actions do is, actions tell us that these changes need to be done. This means that something has changed, now what has changed exactly in the state, actions do not tell this. It only tells that this type of change has occurred, like a button has clicked, the form has submitted, the response has come from API, the component has loaded. So these types of actions generally occur.

Now with every action, there might be a datatype or there might not be any datatype. If I say add a user if we have a user state and I want to add one user in that user state. So I will speak to the action add user and this is the user's data.

Now, who is listening to this information? Here you can see in the image you can send it to the Reducer.

So as soon as we dispatch the action, our reducers(Usually we have multiple reducers in application) all reducers get to know that some action has been dispatched. They work on action & according to action.

So what a reducer exactly is?

Its name is very complex but it is not like that. It is a very simple and pure Javascript function. Pure variable means it does not change any external variable or argument. It is a pure function in which whatever input is given, the output will be the same. It doesn't have anything special. In reducer, you will found normal Javascript functions. There we get the value of state and action by default to reducers.

So whenever action will be dispatched all the reducers will be called. Note this important point all reducer functions are called when action is dispatched but inside one reducer function. If I called a particular action type then only that particular code will execute not others. Getting it?

So basically, When action is getting dispatched centrally and all the reducers get attached in store listened to it and in the type, we attach the reducer It got managed Now I said they managed it means actually what?

Let's come to the next point, what happened inside reducers?

Now the reducers we made get two things inside them. First is state & second is action.

Which state? To the one, it is responsible for. For example header reducer is responsible for the header.

The responsibility of reducer is to the state it is managing. what changes will occur due to this action and how the state will look like and what to return.

Our reducer function takes the state that is the current state, Let's say inside our user there are three more users user is an array in which there are 3 objects and it got add action add a user to the reducer what it will do It will add new data in the current state in which already three objects are there and finally, it will return a new state in which all four objects will exist. So the reducer will not update the state But it will tell that the new state looks like this.

To whom the reducer will tell? To Redux.

According to that redux will make changes in store. So finally the change is centralized. It is not like that I changed in the user area only and we didn't get anything, full application will be managed by this state.

So the full application should be managed by our state centrally so that we can keep it predictable and by doing time travel we can check the reason behind the change in UI. And if there is any problem then it means any extra action is dispatched or the wrong action is dispatched and we can see changes in UI. So it is cleared that if there is a change in UI then there is a change in store that means an action is called. Now, Reducer is our new state of which it has taken responsibility in redux.

Redux is an independent library but for react we have a react-redux library which is maintained by the redux core team only so in case of any changes the library gets updated too.

And if any change gets in redux then also the library of react-redux gets updated so it is so much trustworthy.

I hope the concept theory and logic of redux I explained nicely to you. So If you have any doubt anywhere you can write in the comment section.