Redux Toolkit Project - Full Detailed Documentation
FILE: galleryList-action.js
1. import { createAsyncThunk } from "@reduxjs/toolkit";
- Redux Toolkit ka function jo async actions handle karta hai (jaise API calls).
2. import apiClient from "../../utils/apiClient";
- Axios client import kiya gaya hai jisse API requests bhejte hain.
3. export const getGalleryList = createAsyncThunk("get-galleryList", async () => {
- getGalleryList ek async thunk banaya gaya hai jo Redux ke through async API call handle
karega.
- "get-galleryList" ek unique identifier hai.
4. const res = await apiClient.get(`/gallary_list?cat_id=7`);
- API ko call karta hai gallery data lane ke liye.
5. Response me stringified JSON ke andar unwanted <script> tag tha, toh wo hata diya:
- const scriptIndex = jsonString.indexOf('<script');
- if (scriptIndex !== -1) jsonString = jsonString.substring(0, scriptIndex);
6. const parsedData = JSON.parse(jsonString);
- String ko JSON object me parse kara.
7. return parsedData;
- Parsed data Redux store me bhejne ke liye return kiya.
------------------------------------------------------
FILE: galleryList-slice.js
1. import { createSlice } from "@reduxjs/toolkit";
2. import { getGalleryList } from "../action/galleryList-action";
- Yaha galleryList-action se banaya gaya thunk import karte hain.
3. initialState = {
galleryList: [],
status: "idle",
error: ""
}
- Redux slice ka initial state define kiya gaya.
4. createSlice({
name: "galleryList",
initialState,
extraReducers: (builder) => {
builder
.addCase(getGalleryList.pending, (state) => { state.status = "loading"; })
.addCase(getGalleryList.fulfilled, (state, action) => {
state.status = "succeeded";
state.galleryList = action.payload;
})
.addCase(getGalleryList.rejected, (state, action) => {
state.status = "failed";
state.error = action.error.message;
});
},
})
- extraReducers async thunk ke response ko handle karte hain (pending, fulfilled, rejected).
------------------------------------------------------
FILE: store.js
1. import { configureStore } from "@reduxjs/toolkit";
2. import playerReducer from "./slice/player-slice";
3. import galleryListReducer from "./slice/galleryList-slice";
4. configureStore({
reducer: {
player: playerReducer,
galleryList: galleryListReducer
}
})
- Redux store banaya gaya jisme do slice use ho rahe hain: player & galleryList.
------------------------------------------------------
FILE: Gallery.jsx (React Component)
1. import { useDispatch, useSelector } from 'react-redux';
2. import { useEffect } from 'react';
3. import { getGalleryList } from '../store/action/galleryList-action';
4. useEffect(() => { dispatch(getGalleryList()); }, [dispatch]);
- Component load hote hi data fetch hota hai.
5. const { galleryList = [], status, error } = useSelector((state) => state.galleryList || {});
- Redux store se state read kar rahe hain.
6. Conditional rendering:
- loading: "Loading gallery..."
- failed: error message
- succeeded: galleryList.map(...)
- Gallery cards display karne ke liye map() lagaya gaya hai.
7. JSX me TailwindCSS use karke styling aur layout kiya gaya hai.
------------------------------------------------------
FLOW SUMMARY:
Gallery.jsx useEffect dispatch(getGalleryList) thunk API call parse response fulfilled
galleryList-slice me state update useSelector se data le kar UI render.
------------------------------------------------------
NOTE:
- createAsyncThunk async actions ke liye best practice hai.
- Arrow functions like `() => {}` anonymous function ko define karne ke liye use hota hai.
- `map()` return karta hai ek new array of JSX elements.
- `dispatch()` redux actions trigger karta hai.
- `useSelector()` redux store se state read karta hai.
