📜 Simple Redux Notes — Normal Reducer & AsyncThunk (RTK)

✅ Part 1: Simple Redux Counter Example

(Without Toolkit)
🎁 Goal:

Banayenge ek simple counter app using Redux (without Toolkit) to understand basics.

✅ Step 1: Install Redux

npm install redux react-redux

👉 Yeh command se hum Redux aur React ke liye Redux ka connector install karte hain.

✅ Step 2: Actions ( actions.js )

export const increment = () => ({ type: 'INCREMENT' });

export const decrement = () => ({ type: 'DECREMENT' });

👉 Yeh simple functions hai jo ek action return karte hai, jisme type likha hota hai — kya kaam hona hai
(increment ya decrement).

✅ Step 3: Reducer ( reducer.js )

const initialState = { count: 0 };

export const counterReducer = (state = initialState, action) => {

switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
};

👉 Reducer function pura kaam karta hai state update ka. 👉 initialState ka default value count =
0 hai. 👉 switch-case se pata chalta hai kis action pe kya kaam karna hai.

1
✅ Step 4: Store ( store.js )

import { createStore } from 'redux';

import { counterReducer } from './reducer';

const store = createStore(counterReducer);

export default store;

👉 Store mein reducer ko connect kiya jata hai, poori app ka data yahi store mein hota hai.

✅ Step 5: Component ( App.jsx )

import React from 'react';

import { Provider, useSelector, useDispatch } from 'react-redux';
import store from './store';
import { increment, decrement } from './actions';

function Counter() {
const count = useSelector(state => state.count); // Redux store se count
state le rahe hain
const dispatch =
useDispatch(); // Action bhejne ke liye dispatch le rahe hain

return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
</div>
);
}

export default function App() {

return (
<Provider store={store}> {/* Redux Store poore app ko wrap karta hai
*/}
<Counter />
</Provider>
);
}

👉 Provider se poori app ko Redux store access milta hai. 👉 useSelector se state milti hai aur
useDispatch se action bhejte hain.

2
✅ Simple Flow (Hinglish Explanation):

Component -> dispatch() -> Action -> Reducer -> Store Update -> UI Update

✅ Part 2: Redux Toolkit AsyncThunk Example (Modern RTK Way)

🎁 Goal:

Fetch karenge users API se using createAsyncThunk & extraReducers ka use karke.

✅ Step 1: Install RTK

npm install @reduxjs/toolkit react-redux

👉 Redux Toolkit aur React ke liye Redux ka connector install karte hain.

✅ Step 2: AsyncThunk + Slice ( userSlice.js )

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// AsyncThunk banaya jo API call karega

export const fetchUsers = createAsyncThunk('users/fetchUsers', async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/
users');
return response.json();
});

// Slice banaya jisme initial state aur extraReducers hai

const userSlice = createSlice({
name: 'users',
initialState: {
users: [],
loading: false,
error: null,
},
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchUsers.pending, (state) => {
state.loading = true; // Jab call start ho loading true
})
.addCase(fetchUsers.fulfilled, (state, action) => {
state.loading = false; // Success ke baad loading false aur
data set

3
 state.users = action.payload;
})
.addCase(fetchUsers.rejected, (state) => {
state.loading = false;
state.error = "Failed to fetch users"; // Error case
});
}
});

export default userSlice.reducer;

👉 createAsyncThunk async kaam (API call) ko handle karta hai aur state 3 phase mein change hoti
hai: pending, fulfilled, rejected. 👉 extraReducers se har stage ka handling hota hai.

✅ Step 3: Store ( store.js )

import { configureStore } from '@reduxjs/toolkit';

import userReducer from './userSlice';

const store = configureStore({

reducer: { users: userReducer }
});

export default store;

👉 Redux Toolkit ka configureStore use kiya jisme userReducer ko add kiya.

✅ Step 4: Component ( App.jsx )

import React, { useEffect } from 'react';

import { useDispatch, useSelector } from 'react-redux';
import { fetchUsers } from './userSlice';
import store from './store';
import { Provider } from 'react-redux';

function UsersList() {
const dispatch = useDispatch();
const { users, loading, error } = useSelector(state => state.users);

useEffect(() => {
dispatch(fetchUsers()); // Component mount hote hi API call
}, [dispatch]);

if (loading) return <p>Loading...</p>;

if (error) return <p>{error}</p>;

4
 return (
<div>
<h1>Users List</h1>
{users.map(user => <p key={user.id}>{user.name}</p>)}
</div>
);
}

export default function App() {

return (
<Provider store={store}> {/* Redux store provide kar rahe hain */}
<UsersList />
</Provider>
);
}

👉 Jab component load hota hai toh API call hoti hai, pending/fulfilled ke basis pe loading ya data show
hota hai.

✅ Flow (Hinglish):

Component -> dispatch(fetchUsers()) -> pending -> API call -> fulfilled/
rejected -> extraReducers -> UI Update

✅ Most Important Concepts (Hinglish)

Concept Explanation

Action Kya kaam hona chahiye usko define karta hai

Reducer State kaise update hoga batata hai

Store Sab state ka ghar, pure app ke liye single truth source

useDispatch Action bhejne ke liye

useSelector Redux store se state lene ke liye

createAsyncThunk API calls ko handle karne ka asaan tareeka

extraReducers AsyncThunk ke 3 phase (pending, fulfilled, rejected) handle karne ke liye

✅ Conclusion:

• Basic Redux mein khud se reducer + actions banate hain.

• RTK async thunk se API call easy ho jaati hai, pending , fulfilled , rejected handle hota
hai automatically.

5
Ready reference for interviews + practice! ✅