This article is a part of the Redux Toolkit (A Modern Redux) article and it covers the basics of Redux that will help you to easily understand Redux Toolkit. You can also read out Redux Toolkit article Redux Toolkit

According to the definition, Redux is a state-management library but as a beginner, you will find it difficult to understand what it means. Let's forget it for a moment and understand why we need something like redux.

Problem

Let's assume you are building a restaurant management web app and you have many components in it.

In the above diagram, we can see 5 components. Each component has its state. I want to add a product to my cart and the product state is inside the product detail component. Now we need to move the product state from the product detail page to Cart Page. The flow will be

Product Detail -> Product -> App -> Cart

If the components are more nested then the flow will increase. This is called Prop-drilling, then what will be the solution?

What if we have a global state for our whole application and any component can directly access the state?

Redux

Redux comes to the rescue for this problem. It provides a global state for our application known as a store. We can define our state inside the store and every component has access to the store. Does that mean instead of defining the state inside the component we have to define the state inside the store?

No. you should define only those states inside the store which is sharable between multiple components. If a state is only needed in a particular component then define it inside the component.

So to summarise it we have to define the sharable state inside the store which is provided by Redux. We can set the state from any component and can access the state in any component.

But we can't directly add a state inside the store and can't directly access it from the store. I know It sounds complicated but believes me it's easy. Let's understand two more terms Action and Reducer

Now take a scenario where we have our shareable state(between cart page and product page) inside the redux store and when we click on the cart button from the product detail page, the updated product should be visible in the cart. For updating the state inside the redux store we have to make an Action and Reducer for it.

Action

An Action is an object with two properties a type and data.

we made this action to add value to the cart, similarly, if we want to remove the value from the cart we can make another action

and this action will be passed to Reducer.

Reducer

A Reducer is a function that takes an action and returns a new state to the store. I know it's too hard to understand this line you can come back to this line after some time.

Let's understand it with our problem statement.

First, we have to create our initial state of the cart

This is the shareable state that we want to store inside Redux Store.

For our Cart we will make a cartReducer, that takes the initial state and action that we made earlier.

The logic for updating the state will be written inside the reducer and the action can be anything e.g. add the item to the cart or remove an item from the cart or anything

As the Redux state should be immutable so reducer should always return a new state.

immutable: not changable

Now when we send an action from our page(for adding a product) and the reducer based on the action, it sets the new state in the store but what is the connection between the reducer and store?

The reducer will always get wrapped up inside the store.

Let's Summarize it, we sent an action from the component to the reducer, and based on the action reducer return the state to the store. As soon as the store has been updated with the new state, it sends the updated state to the components.

Now that's enough for the theory. Let's jump to the practical. So this article is to cover the basics of redux, Let's learn the Modern Redux(Redux Toolkit). The link is given below