Recently I have got knowledge about the redux toolkit. From now I will use the redux toolkit in my large project cause it is so good at state management than Context Provider.

Let’s discuss the redux toolkit, as we know it contains our data and passes the data where it needs. Its only re-renders the component which uses the data. Where Context Api re-renders every component.

According to the official documentation, Redux is a predictable state container for JS apps. Let’s break down the definition they provided. We get 2 main keywords here. They are ‘predictable’ and ‘state containers’. We will start with the term predictable. It means that we‘ll have a complete idea of every single action and state of our application. The other term ‘State Container’ refers to a container or store that will be provided by redux for storing our entire application state.

Now let’s come to the point of how redux maintains the ‘predictable’ and ‘state container’ terms. Actually redux provides some events called ‘actions’ that can be used to update and manage our application state. But we have to follow certain patterns and rules of redux here which will help us to predict our application state.

we have an initial idea of what redux is, but what problem does it solve? Let’s imagine you are building a large-scale React application. So there may be many components holding different states. If we want to pass this state from component to component we have to pass them as props again and again. And there is also the problem of ‘lifting state up’ arises. Redux solves this problem and gives us a centralized store to keep our state. We can easily access and modify our state by following some rules and patterns of redux.

First, we have to create a store with the help of the root reducer function that will be provided by redux. There will be some initial state configured with the store. Our UI will be rendered based on the initial state. Now if we want to change something in our UI based on user interaction we have to modify the store. For performing this action redux provides a function called dispatch. Change in store forces all the parts to re-render that are using the previous state. Redux also provides some cool libraries and tools like react-redux, redux-toolkit, redux dev tools. They have made our life easier. For exploring more you can check their official documentation.