RTK QueryAdvanced

Cart Slice — Persistence সহ

localStorage sync, rehydrate, lazily-load — বাংলায়।

5টি অংশবাংলা ভাষায়

Cart সাধারণত persistence-এর শিকার (refresh-এ বাঁচে)। localStorage-এ save/load দিয়ে slice-টা upgrade করি — Redux pattern-এর সাথে মানানসই (slice + subscribe)।

cartSlice.ts with persistencets

import { createSlice } from "@reduxjs/toolkit";

const CART_KEY = "shop_cart";

function loadCart(): CartItem[] {
  // browser-হীন পরিবেশে গার্ড
  if (typeof window === "undefined") return [];
  try {
    return JSON.parse(localStorage.getItem(CART_KEY) ?? "[]");
  } catch {
    return [];
  }
}

interface CartState {
  items: CartItem[];
}

const initialState: CartState = {
  items: loadCart(),
};

const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    // ... আগের reducers (addItem, increment, decrement, removeItem, clearCart)
  },
});

// সর্বদা সব পরিবর্তনে localStorage-এ sync
export function saveCart(items: CartItem[]) {
  if (typeof window !== "undefined") {
    localStorage.setItem(CART_KEY, JSON.stringify(items));
  }
}

export default cartSlice.reducer;

Persist via middleware

store.ts-এ subscribets

import { store } from "@/app/store";

// প্রতিটি state change-এ cart আপডেট localStorage
store.subscribe(() => {
  saveCart(store.getState().cart.items);
});

reducer-এ side effect ছাড়া

Reducer pure — localStorage-এ লেখা side-effect। তাই এটা middleware/subscribe-তেই করা উচিত, reducer-এ নয়। State-পরিবর্তন ও side-effect আলাদা রাখা clean architecture-র ভিত্তি।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।