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. createSlice — Slice Basics
RTK QueryBeginner

createSlice — Slice Basics

createSlice-এ name, initialState, reducers — বাংলায়।

5টি অংশবাংলা ভাষায়
src/features/cart/cartSlice.tsts
ts
import { createSlice } from "@reduxjs/toolkit";


interface CartState {
  items: CartItem[];      // [{ productId, qty }]
}

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

const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    addItem: (state, action: PayloadAction<CartItem>) => {
      // Immer: mutate করলেও আসল state বদলায় না
      const existing = state.items.find(
        (i) => i.productId === action.payload.productId,
      );
      if (existing) {
        existing.qty += action.payload.qty;
      } else {
        state.items.push(action.payload);
      }
    },
  },
});

export const { addItem } = cartSlice.actions;
export default cartSlice.reducer;

createSlice কী তৈরি করে

  • প্রতিটি reducer-এর জন্য action creator (addItem ফাংশন)
  • Action type string (cart/addItem) — collision এড়াতে name-prefixed
  • Reducer — যা store-এ মাউন্ট করা যায়
Dispatch করার সময়ts
ts
dispatch(addItem({ productId: "p1", qty: 1 }));
// action:  { type: "cart/addItem", payload: { productId: "p1", qty: 1 } }
PayloadAction<type>

action.payload optional-বিহীনভাবে typed — TS চেক করে যে কোনো অমিল হয়। এতে any-ছাড়া action লেখা চলবে much সহজে।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।
আগেরRedux Provider — Next.js-এ WrapপরেরReducers ও Actions — Cart Logic
এই পেজে
Tech Tutor

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

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

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

mdanamolhasan1998@gmail.com