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 করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।