If you are learning frontend development, especially with React, you may hear about Redux. At first, it sounds confusing. But donโt worry ๐ I will explain it in very simple words.
๐ค Why Do We Need Redux?
Imagine you are building a React app.
You have:
- A Login component ๐
- A Profile component ๐ค
- A Cart component ๐
- A Navbar component ๐
Now suppose the user logs in. Many components need to know:
- Is the user logged in?
- What is the user name?
- What is inside the cart?
If we pass data from one component to another again and again, it becomes messy ๐ต
This is called prop drilling.
So we need one central place to store all important data.
That is where Redux comes in ๐ช
๐ช What is Redux?
Redux is a state management library.
In simple words:
๐ Redux helps us store and manage data for the whole application in one place.
Think of Redux like a big storage box ๐ฆ
All components can take data from it and also update it.
๐ง Important Concepts in Redux
There are 3 main parts you need to understand:
- Store ๐ฌ
- Action ๐ข
- Reducer ๐
Letโs understand each one with a simple example.
๐ฌ 1. Store (The Big Storage)
The store is where all the data lives.
Example state:
{
count: 0
}
This is called state.
Think of store like:
- A warehouse ๐ฆ
- A bank locker ๐ฆ
- A memory box ๐ง
All data is saved here.
๐ข 2. Action (What You Want To Do)
An action tells Redux:
๐ "Hey, I want to change something!"
Example action:
{
type: "INCREMENT"
}
This means:
Increase the count value.
Actions are simple JavaScript objects.
You can imagine action like:
- Placing an order in restaurant ๐ฝ๏ธ
- Clicking a button ๐ฑ๏ธ
- Sending a message ๐ฌ
๐ 3. Reducer (The Decision Maker)
Reducer decides:
๐ How the state should change.
Example reducer:
function counterReducer(state = { count: 0 }, action) {
if (action.type === "INCREMENT") {
return { count: state.count + 1 }
}
return state
}
So:
- Action says: "Increase"
- Reducer says: "Okay, I will add 1"
- Store updates the value
Reducer is like:
- A chef ๐จโ๐ณ who prepares food based on order
- A machine โ๏ธ that processes input and gives output
๐ How Redux Works (Step by Step)
Letโs say you click a button to increase count:
1๏ธโฃ You click button ๐ฑ๏ธ
2๏ธโฃ Action is sent ๐ข
3๏ธโฃ Reducer receives action ๐
4๏ธโฃ Store updates data ๐ฌ
5๏ธโฃ UI updates automatically ๐
This flow is always in one direction.
This is called one way data flow.
๐ Real Life Example (Shopping Cart)
Imagine you add product to cart:
- You click "Add to Cart" ๐๏ธ
- Action:
{ type: "ADD_ITEM" }๐ข - Reducer adds item to cart ๐
- Store updates cart ๐ฌ
- Cart icon shows new number ๐ข
Simple and clean ๐
๐ก Why Redux is Useful?
Redux helps:
โ
Manage large application state
โ
Avoid prop drilling
โ
Keep data predictable
โ
Debug easily
โ
Maintain clean structure
It is very helpful in big projects where many components share data.
โ ๏ธ Is Redux Always Needed?
No โ
For small apps:
React useState or useContext is enough ๐
Redux is useful when:
- App is big
- Many components share same data
- State logic becomes complex
๐ What is Redux Toolkit?
Today we mostly use Redux Toolkit.
It makes Redux:
- Easier ๐
- Cleaner โจ
- Less code ๐งน
Redux Toolkit is the modern way to use Redux.
๐ฏ Final Thoughts
Redux is just a tool to manage data in one place.
Remember this simple idea:
๐ง Store = Data
๐ข Action = What to do
๐ Reducer = How to change
๐ฌ Redux = Central manager
At first it may look difficult. But once you practice with small examples like counter app ๐งฎ or todo app ๐, you will understand it better.
Keep building projects for learning ๐ป
That is the best way to master Redux ๐
Top comments (0)