What is Redux: Redux is a state management library that manages our application's all data and states. It is mostly used as a state management tool with React, Although we are discussing the use of Redax with React here, it is not the only one that can be used with React. We can use Redux in Angular, Vue, Vanila js if we want.
By now we understand that Redux is mainly used to manage the application state. So let's take a look at the state at a glance.
State is basically an object that contains specific information or data of a component. Since everything in the React is a component, when we work with the component state of the React, we need to transfer data from different component states to another component. Then we can manage the state by sending data through "Props".
Why we should use Redux:
Suppose we have a lot of child components inside a parent. Now we want to change from one child component to another child component, so how do we do that? Let's look at the diagram below.
If we do not use Redux then we need to do props drilling to send data from one child component to another.
What is Prop drilling: Reacts data flow system is unidirectional. When we need to pass data from one component to another component of a tree need to use the prop drilling process. In this process, props are passed from one component to another component that does not need the data but only helps in passing it through the tree. It’s called prop drilling.
Why we should avoid prop drilling?
React is a very popular JavaScript library. The reason is that it is easy to implement and its great performance in a single-page application. But one of the biggest obstacles developers face when working with the library is components re-rendering excessively, which slows down the application performance. And component re-rendering is especially damaging when developers need components to communicate with each other in a process known as prop drilling.
That is why we should avoid prop drilling, And the Redux will help us to get rid of this problem.
Now let us know about the hook of Redux. Redux basically stands on three concepts
1.Store: Redux saves all the data of the application in one place and that is called Store
2.Reducer: Redux will not allow changes directly to this store. Redux has to be told in advance what changes need to be made in the store if this happens.
3.Action: And the message that needs to be sent to Redux to tell 'what happened' is Action.
Top comments (0)