Tech TutorBangla Web Documentation
Portfolio
HomeHTMLCSSTailwind CSSJavaScriptTypeScriptReactNext.jsNode.jsExpressSocket.IOExpoWordPressPostgreSQLPrismaPostgresNestJSMongoDBDockerTanStackTanStack TableRTK QueryGitGitHub
  • RTK Query Documentation39টি অধ্যায়
প্রযুক্তি নির্বাচন
HomeHTMLCSSTailwind CSSJavaScriptTypeScriptReactNext.jsNode.jsExpressSocket.IOExpoWordPressPostgreSQLPrismaPostgresNestJSMongoDBDockerTanStackTanStack TableRTK QueryGitGitHub
  • Redux Intro
  • Architecture
  • Redux Toolkit
  • Project Setup
  • Folder Structure
  • configureStore
  • Redux Provider
  • createSlice
  • Reducers & Actions
  • Typed Hooks
  • Selectors
  • Devtools
  • RTK Query
  • createApi
  • API Middleware
  • API Tags
  • Fetch List
  • Fetch Detail
  • Mutation — Create
  • Mutation CRUD
  • Cache Invalidation
  • Cache Lifecycle
  • Polling
  • Query Selectors
  • Optimistic Update
  • Cart Slice Full
  • Cart UI
  • Local vs Server
  • Listener Middleware
  • Error Handling
  • Loading States
  • Serializability
  • SSR Prefetch
  • Complete Flow
  • Complete Project
  • Production
  • Common Mistakes
  • Best Practices
  • Interview Q&A
  1. Docs
  2. RTK Query
  3. Reducers ও Actions — Cart Logic
RTK QueryIntermediate

Reducers ও Actions — Cart Logic

add/remove/increment/decrement/clear — cart-এর পূর্ণ reducer set — বাংলায়।

4টি অংশবাংলা ভাষায়
cartSlice.ts (complete reducers)ts
ts
import { createSlice } from "@reduxjs/toolkit";


interface CartState {
  items: CartItem[];
}

const initialState: CartState = { items: [] };

const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    addItem: (state, action: PayloadAction<{ productId: string; qty: number }>) => {
      const existing = state.items.find(
        (i) => i.productId === action.payload.productId,
      );
      if (existing) {
        existing.qty += action.payload.qty;
      } else {
        state.items.push(action.payload);
      }
    },

    increment: (state, action: PayloadAction<string>) => {
      const item = state.items.find((i) => i.productId === action.payload);
      if (item) item.qty += 1;
    },

    decrement: (state, action: PayloadAction<string>) => {
      const item = state.items.find((i) => i.productId === action.payload);
      if (item) {
        item.qty -= 1;
        if (item.qty <= 0) {
          state.items = state.items.filter(
            (i) => i.productId !== action.payload,
          );
        }
      }
    },

    removeItem: (state, action: PayloadAction<string>) => {
      state.items = state.items.filter(
        (i) => i.productId !== action.payload,
      );
    },

    clearCart: (state) => {
      state.items = [];
    },
  },
});

export const {
  addItem,
  increment,
  decrement,
  removeItem,
  clearCart,
} = cartSlice.actions;

export default cartSlice.reducer;

কেন সরাসরি mutate

Immer look-এ সরাসরি state.items.push লিখলেও বাস্তবে new state কপি হয়। আপনি যা লিখছেন তা draft — শেষে Immer freeze করে। Classic immutable {...state, items: ...} লেখার প্রয়োজন নেই।

সতর্কতা

আপনি যা mutate করছেন তা draft। শুধু রিটার্ন করা state-টি দরকার হলে return mechanism-এ area break করে। সরাসরি state return না করে draft mutate ধরে চলুন — এটাই cleanest।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।
আগেরcreateSlice — Slice BasicsপরেরTyped Hooks — useAppDispatch / useAppSelector
এই পেজে
Tech Tutor

বাংলায় ওয়েব ডেভেলপমেন্ট ডকুমেন্টেশন শিখুন — ধাপে ধাপে।

Homeসব ডকুমেন্টেশনQuick Startআমার নোটস

© 2026 Tech Tutor. বাংলায় শিখুন, বাংলায় গড়ুন।

mdanamolhasan1998@gmail.com