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