📘 Redux Toolkit: React ডেভেলপারদের জন্য একটি পূর্ণাঙ্গ গাইড

npx create-react-app rtk-world-class
cd rtk-world-class
npm install @reduxjs/toolkit react-redux

import { configureStore } from "@reduxjs/toolkit";
import authReducer from "../features/auth/authSlice";
import cartReducer from "../features/cart/cartSlice";
 
export const store = configureStore({
  reducer: {
    auth: authReducer,
    cart: cartReducer,
  },
});

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "./app/store";
 
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

import { createSlice } from "@reduxjs/toolkit";
 
const initialState = {
  user: null,
  isLoggedIn: false,
};
 
const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    login: (state, action) => {
      state.user = action.payload;
      state.isLoggedIn = true;
    },
    logout: (state) => {
      state.user = null;
      state.isLoggedIn = false;
    },
  },
});
 
export const { login, logout } = authSlice.actions;
export default authSlice.reducer;

import { createSlice } from "@reduxjs/toolkit";
 
const initialState = {
  items: [],
};
 
const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    addToCart: (state, action) => {
      state.items.push(action.payload);
    },
    removeFromCart: (state, action) => {
      state.items = state.items.filter((item) => item.id !== action.payload);
    },
    clearCart: (state) => {
      state.items = [];
    },
  },
});
 
export const { addToCart, removeFromCart, clearCart } = cartSlice.actions;
export default cartSlice.reducer;

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { logout } from "../features/auth/authSlice";
 
function Navbar() {
  const { user, isLoggedIn } = useSelector((state) => state.auth);
  const cartItems = useSelector((state) => state.cart.items);
  const dispatch = useDispatch();
 
  return (
    <nav style={{ display: "flex", justifyContent: "space-between" }}>
      <h2>🛒 RTK Shop</h2>
      <div>
        {isLoggedIn ? (
          <>
            <span>👤 {user.name}</span>
            <button onClick={() => dispatch(logout())}>Logout</button>
          </>
        ) : (
          <span>Please Login</span>
        )}
        <span> | Cart: {cartItems.length}</span>
      </div>
    </nav>
  );
}
 
export default Navbar;

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
 
export const fetchProducts = createAsyncThunk("products/fetch", async () => {
  const res = await fetch("https://fakestoreapi.com/products");
  return await res.json();
});
 
const productsSlice = createSlice({
  name: "products",
  initialState: { items: [], status: "idle", error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchProducts.pending, (state) => {
        state.status = "loading";
      })
      .addCase(fetchProducts.fulfilled, (state, action) => {
        state.status = "succeeded";
        state.items = action.payload;
      })
      .addCase(fetchProducts.rejected, (state, action) => {
        state.status = "failed";
        state.error = action.error.message;
      });
  },
});
 
export default productsSlice.reducer;

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 
export const productsApi = createApi({
  reducerPath: "productsApi",
  baseQuery: fetchBaseQuery({ baseUrl: "https://fakestoreapi.com/" }),
  endpoints: (builder) => ({
    getProducts: builder.query({
      query: () => "products",
    }),
  }),
});
 
export const { useGetProductsQuery } = productsApi;