Zustand আর Redux Toolkit — global store, action আর selector

১ · Store কেন React-এর বাইরে

একটি মুদি দোকান ভাবুন। ক্যাশে একটি বড় হিসাব খাতা আছে। চার জন কর্মচারী আলাদা আলাদা কাজ করেন। একজন শুধু চালের মজুত দেখেন, একজন শুধু আজকের বিক্রি। প্রতিটি লেনদেনে যদি মালিক চারজনকেই ডেকে পুরো খাতা পড়ে শোনান, সবার কাজ থেমে যাবে। ভালো ব্যবস্থা হলো, খাতা এক জায়গায় থাকবে। প্রত্যেকে বলে রাখবেন, “আমার লাইনটি বদলালে আমাকে জানাবেন।”

বাজারঘরের ঝুড়িতেও এই সমস্যা। ওপরের মেনুতে পণ্যের সংখ্যা দেখাতে হয়, পণ্যের পাতায় “যোগ” বোতাম আছে, আর পাশের প্যানেলে মোট দাম। এই তিনজন ট্রিতে অনেক দূরে। পর্ব ১৬ আর ১৭-তে state ওপরে তোলা আর Context দেখেছেন। Context মান পৌঁছে দেয়, কিন্তু মান বদলালে যে যে component ওই Context পড়ে, React তাদের সবাইকে আবার render করে। কে কোন অংশ পড়েছে, Context তা দেখে না।

Store এখানে অন্য পথ নেয়। State থাকে একটি সাধারণ JavaScript object-এ, React-এর বাইরে, একটি module-এর ভেতরে। Component শুধু তার দরকারি অংশ পড়ে আর store-এ subscribe করে রাখে। Store বদলালে প্রতিটি subscriber নিজের অংশ মিলিয়ে দেখে। অংশ না বদলালে তার render-ই হয় না। এই শব্দগুলো পরের তিন অংশে পরিষ্কার হবে।

২ · useSyncExternalStore — React আর বাইরের জগতের চুক্তি

React জানে না আপনার module-এর একটি variable কখন বদলাল। তাকে জানাতে দুটি জিনিস লাগে। React 18 (২০২২) থেকে আসা hook useSyncExternalStore ঠিক এই দুটি নেয়:

const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?);

• subscribe(callback): React একটি callback দেয়। Store বদলালে সেটি ডাকতে হবে। ফেরত দিতে হবে unsubscribe function.
• getSnapshot(): এখনকার মান ফেরত দেয়। Store না বদলালে প্রতিবার একই মান ফেরাতে হবে। React Object.is দিয়ে আগের মানের সাথে মেলায়, আলাদা হলে render করে।
• getServerSnapshot(): ঐচ্ছিক। Server render আর hydration-এর সময় যে মান দেখাবে। এটি না দিলে server-এ render করার সময় error হয়।

Zustand-এর ভেতরে আসলে এটুকুই আছে। নিচের ব্লকটি শেখানোর মডেল, আসল Zustand নয়। প্যাকেজ এখানে import করা যায় না, তাই একই ধারণা প্রায় ১৫ লাইনে লেখা হয়েছে। বোতাম চেপে নিচের log দেখুন।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
// শেখানোর মডেল: আসল Zustand নয়
function create(init) {
  let state;
  const listeners = new Set();
  const set = (partial) => {
    state = { ...state, ...partial };
    listeners.forEach((fn) => fn());
  };
  state = init(set, () => state);
  const subscribe = (fn) => { listeners.add(fn); return () => listeners.delete(fn); };
  return (selector) => useSyncExternalStore(subscribe, () => selector(state));
}
const useCart = create((set, get) => ({
  count: 0, shopper: 'Rafi',
  add: () => set({ count: get().count + 1 }),
  rename: () => set({ shopper: 'Mina' }),
}));
const runs = { Badge: 0, Name: 0 };
const log = (who) => console.log(who, 'render', ++runs[who]);
function Badge() { const c = useCart((s) => s.count); log('Badge'); return <p>ঝুড়ি: {c}</p>; }
function Name() { const n = useCart((s) => s.shopper); log('Name'); return <p>ক্রেতা: {n}</p>; }
function Buttons() {
  const add = useCart((s) => s.add), rename = useCart((s) => s.rename);
  return <><button onClick={add}>যোগ</button> <button onClick={rename}>নাম বদল</button></>;
}
createRoot(document.getElementById('root')).render(<><Badge /><Name /><Buttons /></>);
</script>

৩ · Selector — কে কখন re-render হবে

Selector একটি ছোট function, যা পুরো state থেকে একটি অংশ বেছে নেয়। Store বদলালে কী হয়, এবার ধীরে দেখা যাক। শুরুতে state হলো count: 2, shopper: 'Rafi'. তিনটি component subscribe করে আছে। ক্রেতা “যোগ” চাপলেন।

1function set(partial) {2  state = { ...state, ...partial };3  listeners.forEach((fn) => fn());4}5// Badge  : (s) => s.count6// Name   : (s) => s.shopper7// Buttons: (s) => s.add

দুটি সাধারণ ভুল, দুটিই চালিয়ে দেখা

ভুল ১: পুরো store নেওয়া। const { add } = useCart(); দেখতে সুন্দর। কিন্তু selector না দিলে পুরো state-ই সেই component-এর snapshot. তাই যেকোনো বদলেই সে render হবে, এমনকি add না বদলালেও।

ভুল ২: প্রতিবার নতুন object ফেরানো। (s) => ({ lines: s.lines }) প্রতি ডাকে একটি নতুন object বানায়। পর্ব ১০-এ দেখা reference equality অনুযায়ী দুটি আলাদা object সমান নয়। Zustand 5-এ এটি সরাসরি অ্যাপ ভেঙে দেয়। সত্যিকারের run (Zustand 5.0.16, React 19.3.1, Vite dev server, Edge-এর console):

The result of getSnapshot should be cached to avoid an infinite loop
Uncaught Error: Maximum update depth exceeded. This can happen when a component
repeatedly calls setState inside componentWillUpdate or componentDidUpdate.
React limits the number of nested updates to prevent infinite loops.
An error occurred in the <CartPanel> component.

একই ভুল Redux-এ অ্যাপ ভাঙে না, শুধু development-এ সাবধান করে। React-Redux 9.3.1-এর real console বার্তা (stack trace বাদ দিয়ে):

Selector unknown returned a different result when called with the same parameters.
This can lead to unnecessary rerenders.
Selectors that return a new reference (such as an object or an array) should be memoized

Zustand-এ একসাথে কয়েকটি মান দরকার হলে useShallow ব্যবহার করুন। এটি প্রতিটি field আগের মানের সাথে shallow ভাবে মেলায়, আর মিললে আগের object-টিই ফেরত দেয়:

import { useShallow } from 'zustand/react/shallow';

// ভালো: একটি করে ছোট মান
const add = useCart((s) => s.add);

// ভালো: একসাথে কয়েকটি, useShallow দিয়ে
const { lines, clear } = useCart(useShallow((s) => ({ lines: s.lines, clear: s.clear })));

Render সংখ্যা মাপা হয়েছে একই ধাপে: পাতা খোলা, তারপর ৫টি কাজ (চাল, চাল, ডাল, ডাল কমানো, খালি করা)। Production build, Edge, Playwright, একটি local run. বদলগুলো শুধু ProductList-এর ভেতরে, যে component-টি ঝুড়ির কিছুই দেখায় না:

৪ · Flux থেকে Redux — state বদলানোর একটিই পথ

Redux-এর নথি তিনটি নীতি দেয়। এগুলো মুখস্থ নয়, বুঝে রাখার জিনিস:

নিচের ব্লকটিও শেখানোর মডেল। এতে Redux-এর মূল store-টি প্রায় ১০ লাইনে লেখা। শেষ লাইনে খেয়াল করুন, শুধু action-এর তালিকা থেকেই পুরোনো state আবার বের করা যাচ্ছে।

// শেখানোর মডেল: Redux-এর মূল ধারণা, আসল library নয়
function createStore(reducer) {
  let state = reducer(undefined, { type: '@@init' });
  const listeners = new Set();
  return {
    getState: () => state,
    subscribe: (fn) => { listeners.add(fn); return () => listeners.delete(fn); },
    dispatch(action) {
      state = reducer(state, action);      // নতুন state
      listeners.forEach((fn) => fn());     // সবাইকে খবর
    },
  };
}
function cart(state = { count: 0, total: 0 }, action) {
  switch (action.type) {
    case 'cart/added':
      return { count: state.count + 1, total: state.total + action.price };
    case 'cart/cleared':
      return { count: 0, total: 0 };
    default:
      return state;                        // অচেনা action: একই state
  }
}
const store = createStore(cart);
const actionLog = [];                      // DevTools-এর মতো খাতা
const send = (action) => {
  store.dispatch(action);
  actionLog.push(action);
  console.log(actionLog.length, action.type, JSON.stringify(store.getState()));
};
send({ type: 'cart/added', price: 420 });
send({ type: 'cart/added', price: 135 });
send({ type: 'cart/cleared' });
const replay = (n) => actionLog.slice(0, n).reduce(cart, undefined);
console.log('time travel to 2:', JSON.stringify(replay(2)));

1 cart/added {"count":1,"total":420}
2 cart/added {"count":2,"total":555}
3 cart/cleared {"count":0,"total":0}
time travel to 2: {"count":2,"total":555}

আসল Redux Toolkit-এ একটি action পুরো পথ কীভাবে পার হয়, দেখা যাক। ঝুড়িতে এক প্যাকেট চাল আছে, ক্রেতা আবার “যোগ” চাপলেন। মানগুলো নিচের সত্যিকারের run থেকে নেওয়া।

cart.lines = [{ id: 'rice', price: 420, qty: 1 }]
dispatch(added({ id: 'rice', price: 420 }))

{ type: 'cart/added', payload: { id: 'rice', price: 420 } }

thunk: এটি function? না, তাই সামনে যায়
development-এর পরীক্ষা: state বদলানো হয়নি, মান serializable
next(action)

const line = state.lines.find(...)  // rice পাওয়া গেল
line.qty += 1                       // 1 থেকে 2
// Immer নতুন state বানায়, পুরোনোটি অক্ষত

cart.lines = [{ id: 'rice', price: 420, qty: 2 }]
state changed? true

Badge      selectCount  1 → 2      render
CartPanel  selectLines  নতুন array  render
ProductList শুধু dispatch           render নেই

৫ · Redux Toolkit — configureStore, createSlice আর Immer

আগে Redux লিখতে action type, action creator আর switch আলাদা আলাদা ফাইলে লিখতে হতো। পুরোনো createStore এখন আর সুপারিশ করা হয় না। এখন সরকারি পথ হলো Redux Toolkit. নিচে বাজারঘরের ঝুড়ির আসল slice, Vite project-এ চালানো (লেখার সময়ে @reduxjs/toolkit 2.13.0, react-redux 9.3.1, যা ভেতরে Immer 11.2.9 আর Redux 5.0.1 আনে)।

import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
import type { Product } from './products';

export type Line = Product & { qty: number };
const initialState = { lines: [] as Line[] };

const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    added(state, action: PayloadAction<Product>) {
      const line = state.lines.find((l) => l.id === action.payload.id);
      if (line) line.qty += 1;
      else state.lines.push({ ...action.payload, qty: 1 });
    },
    decremented(state, action: PayloadAction<string>) {
      const line = state.lines.find((l) => l.id === action.payload);
      if (!line) return;
      line.qty -= 1;
      if (line.qty === 0) state.lines = state.lines.filter((l) => l.id !== line.id);
    },
    cleared(state) {
      state.lines = [];
    },
  },
});

export const { added, decremented, cleared } = cartSlice.actions;
export const cartReducer = cartSlice.reducer;

import { configureStore } from '@reduxjs/toolkit';
import { cartReducer } from './cartSlice';

export const store = configureStore({ reducer: { cart: cartReducer } });

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

• createSlice: একটি slice মানে state-এর একটি ভাগ। নাম, শুরুর মান আর reducer দিলে সে action creator নিজে বানিয়ে দেয়।
• configureStore: Store বানায়, thunk যোগ করে, Redux DevTools-এর সংযোগ চালু করে, আর development-এ সাধারণ ভুল ধরার পরীক্ষা জুড়ে দেয়।
• Provider: react-redux-এর এই component অ্যাপের ওপরে বসিয়ে store দিতে হয়। ভেতরে useSelector আর useDispatch দিয়ে পড়া আর পাঠানো হয়। React-Redux-ও ভেতরে useSyncExternalStore-ই ব্যবহার করে।

Immer: mutation-এর মতো লেখা, কিন্তু mutation নয়

line.qty += 1 লেখাটি reducer-এর নিয়ম ভাঙছে মনে হয়। এখানেই Immer. পর্ব ১০-এ আপনি spread দিয়ে নিজে immutable update লিখেছেন। Immer আপনাকে একটি draft দেয়, যা আসল state-এর একটি Proxy মোড়ক। আপনি যা লেখেন, Proxy তা ধরে রাখে, আর শেষে শুধু বদলানো অংশের নতুন কপি বানায়। নিচের ব্লকটি Immer-এর ধারণার শেখানোর মডেল, সম্পূর্ণ Immer নয়।

// শেখানোর মডেল: Immer-এর ধারণা, আসল Immer এর চেয়ে অনেক বেশি কিছু করে
function makeDraft(base, tellParent) {
  let copy = null;                         // প্রথম লেখার আগে কপি নেই
  const kids = new Map();
  const touch = () => {
    if (copy) return;
    copy = Array.isArray(base) ? [...base] : { ...base };
    tellParent();                          // ওপরের স্তরেও কপি লাগবে
  };
  const proxy = new Proxy(base, {
    get(_, key) {
      const value = (copy ?? base)[key];
      if (typeof value !== 'object' || value === null) return value;
      if (!kids.has(key)) kids.set(key, makeDraft(value, touch));
      return kids.get(key).proxy;
    },
    set(_, key, value) { touch(); copy[key] = value; return true; },
  });
  const finish = () => {
    if (!copy) return base;                // না বদলালে আগের object-ই
    for (const [key, kid] of kids) copy[key] = kid.finish();
    return copy;
  };
  return { proxy, finish };
}
function produce(base, recipe) {
  const d = makeDraft(base, () => {});
  recipe(d.proxy); return d.finish();
}
const before = { lines: [{ id: 'rice', qty: 1 }, { id: 'dal', qty: 2 }], coupon: { code: 'EID10' } };
const after = produce(before, (d) => { d.lines[0].qty += 1; });
console.log('qty:', before.lines[0].qty, '->', after.lines[0].qty);
console.log('root same?', before === after, '| lines same?', before.lines === after.lines);
console.log('rice same?', before.lines[0] === after.lines[0], '| dal same?', before.lines[1] === after.lines[1]);
console.log('coupon same?', before.coupon === after.coupon);

qty: 1 -> 2
root same? false | lines same? false
rice same? false | dal same? true
coupon same? true

Node-এ চালিয়ে দেখা: thunk আর তিনটি ভুল

createAsyncThunk একটি async কাজের জন্য তিনটি action নিজে বানায়: pending, fulfilled আর rejected. Reducer pure থাকে, network-এর কাজ থাকে thunk-এর ভেতরে। Slice এগুলো extraReducers-এ ধরে। কুপন যাচাইয়ের ছোট উদাহরণ, যেখানে network নকল:

const fetchCoupon = createAsyncThunk('cart/fetchCoupon', async (code) => {
  await new Promise((r) => setTimeout(r, 10));   // নকল network
  if (code !== 'EID10') throw new Error('Invalid coupon');
  return { code, percent: 10 };
});

// createSlice-এর ভেতরে
extraReducers: (builder) => {
  builder
    .addCase(fetchCoupon.pending, (state) => { state.status = 'loading'; })
    .addCase(fetchCoupon.fulfilled, (state, action) => {
      state.status = 'idle';
      state.coupon = action.payload;
    })
    .addCase(fetchCoupon.rejected, (state, action) => {
      state.status = 'failed';
      state.coupon = null;
      console.log('   error:', action.error.message);
    });
},

এর সাথে একটি log middleware জুড়ে node demo.mjs চালানো হলো। সত্যিকারের run (Node 24.15.0, @reduxjs/toolkit 2.13.0, development mode; পরিষ্কার দেখাতে lines ছোট করা হয়েছে আর শেষের warning-এর লিংক বাদ):

$ node demo.mjs
{ type: 'cart/added', payload: { id: 'rice', price: 420 } }
cart/added => {"lines":[{"id":"rice","price":420,"qty":1}],"coupon":null,"status":"idle"}
cart/added => {"lines":[{"id":"rice","price":420,"qty":2}],"coupon":null,"status":"idle"}
…
state changed? true
cart/fetchCoupon/pending => {"lines":[…],"coupon":null,"status":"loading"}
cart/fetchCoupon/fulfilled => {"lines":[…],"coupon":{"code":"EID10","percent":10},"status":"idle"}
cart/fetchCoupon/pending => {"lines":[…],"coupon":{"code":"EID10","percent":10},"status":"loading"}
   error: Invalid coupon
cart/fetchCoupon/rejected => {"lines":[…],"coupon":null,"status":"failed"}
--- ভুল ১: reducer-এর বাইরে বদলানো
TypeError: Cannot assign to read only property 'qty' of object '#<Object>'
--- ভুল ২: draft বদলে return-ও
[Immer] An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft.
--- ভুল ৩: Date ঢোকানো
A non-serializable value was detected in an action, in the path: `payload.at`. Value: 1970-01-01T00:00:00.000Z
A non-serializable value was detected in the state, in the path: `cart.lines.2.at`. Value: 1970-01-01T00:00:00.000Z

• ভুল ১: Immer state freeze করে রাখে। তাই store থেকে পাওয়া object-এ সরাসরি লিখলে error আসে।
• ভুল ২: এক reducer-এ draft বদলানো অথবা নতুন মান ফেরত দেওয়া, যেকোনো একটি করা যায়। দুটো একসাথে নয়। state = x লিখলেও কাজ হয় না, কারণ তাতে শুধু local variable বদলায়।
• ভুল ৩: State-এ শুধু serializable মান রাখুন। Date, Map, Promise, function রাখলে DevTools আর replay ঠিকমতো কাজ করে না। লক্ষ করুন, এটি শুধু সতর্কবার্তা, কাজ থামায় না। তারিখ হলে ISO লেখা রাখুন।

৬ · Redux DevTools, time travel আর memoized selector

Redux-এর সবচেয়ে বড় উপহার তার খাতা। Redux DevTools একটি browser extension. configureStore এর সাথে সংযোগ নিজে থেকেই চালু করে। এই পর্বে extension চালিয়ে দেখানো হয়নি, তাই নিচে শুধু তার কাজের বর্ণনা:

• Action list: প্রতিটি action ক্রম অনুযায়ী দেখায়, আর প্রতিটির পরের state আর পার্থক্য (diff).
• Time travel: পুরোনো একটি action-এ ফিরে গেলে UI সেই সময়ের state দেখায়। আগের মডেলের replay-এর মতো ধারণা।
• Export আর import: Action-এর তালিকা ফাইলে নিয়ে অন্য কম্পিউটারে আবার চালানো যায়।

Bug report-এ “ঝুড়ির দাম ভুল” শুনে আপনি action-এর তালিকা ধরে ঠিক সেই ধাপটি খুঁজে পান, যেখানে মান ভুল হয়েছে। State যদি ঝুড়ির ভেতরে যেকোনো জায়গা থেকে বদলানো যেত, এটি সম্ভব হতো না। ক্রিকেটের DRS রিপ্লের কথা ভাবুন: প্রতিটি বল রেকর্ড আছে বলেই ফিরে দেখা যায়।

Derived data: store-এ নয়, selector-এ

ঝুড়ির মোট দাম state-এ রাখার দরকার নেই। lines থেকে সবসময় হিসাব করা যায়। এটি derived state. আলাদা রাখলে দুটি মান একদিন মিলবে না। Selector সংখ্যা ফেরালে কোনো সমস্যা নেই, কারণ সংখ্যা Object.is-এ সরাসরি মেলে। সমস্যা হয় যখন selector একটি নতুন array ফেরায়, যেমন filter. তখন memoized selector লাগে। Redux Toolkit এর জন্য createSelector দেয় (Reselect থেকে আসা)। মূল ধারণাটি নিচের শেখানোর মডেলে:

// শেখানোর মডেল: createSelector-এর ধারণা, শেষ ইনপুট আর শেষ ফল মনে রাখে
function createSelector(input, compute) {
  let hasRun = false, lastInput, lastResult;
  return (state) => {
    const value = input(state);
    if (hasRun && Object.is(value, lastInput)) return lastResult;
    hasRun = true;
    lastInput = value;
    lastResult = compute(value);
    return lastResult;
  };
}
let runs = 0;
const bigLines = (lines) => { runs += 1; return lines.filter((l) => l.qty >= 2); };
const selectPlain = (s) => s.lines.filter((l) => l.qty >= 2);
const selectMemo = createSelector((s) => s.lines, bigLines);

const s1 = { lines: [{ id: 'rice', qty: 2 }, { id: 'dal', qty: 1 }], drawerOpen: false };
const s2 = { ...s1, drawerOpen: true };                 // lines একই reference
const s3 = { ...s2, lines: [...s2.lines, { id: 'oil', qty: 3 }] };

console.log('plain, same state  :', selectPlain(s1) === selectPlain(s1));
const a = selectMemo(s1);
const b = selectMemo(s2);
console.log('memo, drawer change:', a === b, '| runs', runs);
const c = selectMemo(s3);
console.log('memo, lines change :', b === c, '| runs', runs, '| length', c.length);

plain, same state  : false
memo, drawer change: true | runs 1
memo, lines change : false | runs 2 | length 2

৭ · Zustand — একটি hook-ই store

Zustand জার্মান শব্দ, অর্থ “অবস্থা”। Poimandres (pmndrs) নামের open-source দল ২০১৯ সালের দিকে এটি আনে। Action type নেই, reducer নেই, Provider নেই। লেখার সময়ে version 5.0.16. React 18 বা নতুন লাগে, কারণ এটি সরাসরি React-এর useSyncExternalStore ব্যবহার করে। Package-এর react.mjs ফাইলে create আর useStore মিলিয়ে মাত্র ২০ লাইনের মতো কোড, আর vanilla store-এর অংশটিও প্রায় ততটুকুই।

import { create } from 'zustand';
import type { Product } from './products';

export type Line = Product & { qty: number };
type Cart = {
  lines: Line[];
  add: (p: Product) => void;
  decrement: (id: string) => void;
  clear: () => void;
};

export const useCart = create<Cart>()((set) => ({
  lines: [],
  add: (p) =>
    set((s) => {
      const found = s.lines.some((l) => l.id === p.id);
      return {
        lines: found
          ? s.lines.map((l) => (l.id === p.id ? { ...l, qty: l.qty + 1 } : l))
          : [...s.lines, { ...p, qty: 1 }],
      };
    }),
  decrement: (id) =>
    set((s) => ({
      lines: s.lines
        .map((l) => (l.id === id ? { ...l, qty: l.qty - 1 } : l))
        .filter((l) => l.qty > 0),
    })),
  clear: () => set({ lines: [] }),
}));

export const selectCount = (s: Cart) => s.lines.reduce((sum, l) => sum + l.qty, 0);
export const selectTotal = (s: Cart) =>
  s.lines.reduce((sum, l) => sum + l.qty * l.price, 0);

• create: একটি hook ফেরত দেয়, আর সেই hook-ই store. TypeScript-এ create<Cart>()(...), মাঝের ফাঁকা () সহ, এভাবেই লিখতে হয়।
• set: ডিফল্টভাবে ওপরের স্তরে merge করে। তাই clear-এ শুধু lines দিলেই হয়। তবে nested object নিজে spread করতে হয়, Immer নেই। চাইলে zustand/middleware/immer যোগ করা যায়।
• React-এর বাইরে: useCart.getState() আর useCart.setState() সাধারণ JavaScript থেকেই চলে।

persist: reload-এর পরও ঝুড়ি থাকুক

Reload দিলে module আবার চলে, তাই store আবার খালি হয়। persist একটি middleware, যা create-এর ভেতরের function-টিকে মুড়ে দেয়:

import { persist } from 'zustand/middleware';

export const useCart = create<Cart>()(persist((set) => ({
  // ... আগের মতোই
}), {
  name: 'bazarghar-cart',                     // localStorage-এর key
  version: 1,                                 // আকার বদলালে বাড়ান
  partialize: (s) => ({ lines: s.lines }),    // শুধু এটুকু জমা রাখুন
}));

এবার ঝুড়িতে চাল রেখে পাতা reload করা হলো। React ছাড়া Node-এ, একটি নকল localStorage দিয়ে persist চালিয়ে ভেতরের ক্রম ধরা হয়েছে। নিচের ধাপগুলো সেই real output আর package-এর source মিলিয়ে লেখা।

1const base = config(set, get, api);2onRehydrateStorage?.();3const saved = storage.getItem(name);4if (saved.version !== version) migrate();5set(merge(saved.state, base), true);6hasHydrated = true;7// পরে: প্রতিটি set-এর পর setItem

সত্যিকারের run (Zustand 5.0.16, Node 24.15.0; localStorage-এর জায়গায় নকল storage, কারণ Node-এ window নেই; version বদলালে কী হয় তাও চালিয়ে দেখা হয়েছে):

রিলোড: sync storage
  hydration শুরু
  storage.getItem bazarghar-cart
  hydration শেষ
  create-এর পরপরই [{"id":"rice","qty":1}] hasHydrated true
রিলোড: async storage
  hydration শুরু
  async getItem bazarghar-cart
  create-এর পরপরই [] hasHydrated false
  hydration শেষ
  একটু পরে [{"id":"rice","qty":1}] hasHydrated true
নতুন version: migrate
  hydration শুরু
  storage.getItem bazarghar-cart
  migrate from 1
  storage.setItem {"state":{"lines":[{"id":"rice","qty":1,"price":0}]},"version":2}
  hydration শেষ
  পরে [{"id":"rice","qty":1,"price":0}]
নতুন version: migrate নেই
  hydration শুরু
  storage.getItem bazarghar-cart
State loaded from storage couldn't be migrated since no migrate function was provided
  hydration শেষ
  পরে []

তিনটি শিক্ষা। Async storage হলে প্রথম render খালি থাকবে, তখন persist.hasHydrated() দেখে loading দেখাতে হয়। কোডের আকার বদলালে version বাড়ান আর migrate লিখুন। migrate না দিলে জমা ঝুড়ি বাদ পড়ে, আর শুধু একটি console বার্তা আসে।

৮ · একই ঝুড়ি, দুই পথ — সত্যিকারের তুলনা

মতামত নয়, মাপ। create-vite 9.3.3-এর react-ts template থেকে তিনটি project বানানো হলো, React 19.3.1, Vite 8.3.5, TypeScript 7.0.2. তিনটিতেই হুবহু এক UI: তিনটি পণ্য, Badge, ProductList আর CartPanel, কাজ চারটি (যোগ, কমানো, খালি, মোট)। পার্থক্য শুধু state কোথায় থাকে।

# ~/bazarghar-context (Context + useReducer)
$ npm run build
dist/assets/index-CeHF0Snv.js  221.04 kB │ gzip: 69.19 kB

# ~/bazarghar-zustand
$ npm i zustand@5.0.16 && npm run build
dist/assets/index-tKTNV0nj.js  221.87 kB │ gzip: 69.59 kB

# ~/bazarghar-redux
$ npm i @reduxjs/toolkit@2.13.0 react-redux@9.3.1 && npm run build
dist/assets/index-JWH-oboj.js  243.73 kB │ gzip: 77.44 kB

# Zustand + persist
dist/assets/index-Dt_JA00Y.js  223.85 kB │ gzip: 70.43 kB

সংখ্যাগুলো ঠিকমতো পড়ুন। Bundle-এর ৬৯ kB-এর প্রায় সবটাই React আর React DOM. Redux Toolkit-এর ৮.২৫ kB-তে Immer, Redux, thunk, Reselect আর React-Redux আছে, তবে এটি এককালীন খরচ। Slice ৫০টি হলেও library-র এই অংশ আর বাড়ে না। ছোট ঝুড়িতে Redux-এর সব সুবিধা কাজে লাগে না, বড় দলের অ্যাপে লাগতে পারে। এই মাপ একটি ছোট demo-র, সাধারণ সিদ্ধান্ত নয়।

Community-তে এখানে মতভেদ আছে। কেউ বলেন Redux এখন বেশি ভারী, কেউ বলেন বড় অ্যাপে শৃঙ্খলা ছাড়া Zustand-এর store এলোমেলো হয়ে যায়। দুটোই সত্য হতে পারে। নতুন project-এ দলের অভ্যাস আর অ্যাপের আকার দেখে সিদ্ধান্ত নিন।

৯ · কখন কোনোটিই লাগে না, আর সাধারণ ভুল

এই পর্বের সবচেয়ে কাজের কথা হয়তো এটাই: global store না নেওয়াও একটি ভালো সিদ্ধান্ত। ২০১৬ সালে Dan Abramov নিজেই “You Might Not Need Redux” লিখেছিলেন। নতুন library নেওয়ার আগে নিচের ক্রমে প্রশ্ন করুন:

• মানটি কি server থেকে আসে? তাহলে এটি server state. Cache library নিন, store-এ কপি রাখবেন না।
• মানটি কি URL-এ মানায়? Search, filter, পাতা নম্বর URL-এ রাখলে link ভাগ করা যায়। পর্ব ২০-এ দেখবেন।
• মানটি কি শুধু একটি component বা তার কাছাকাছি লাগে? useState আর পর্ব ১৬-এর lifting up-ই যথেষ্ট।
• মানটি কি কম বদলায়? Context-ই যথেষ্ট।
• মানটি অনেক দূরের component পড়ে আর ঘন ঘন বদলায়? এবার store নিন। বাজারঘরের ঝুড়ি ঠিক এই রকম।

সাধারণ ভুলগুলো এক জায়গায়:

১০ · AI-এর যুগে store লেখা

Redux-এর বয়স দশ বছরের বেশি, তাই ইন্টারনেটে পুরোনো কোড অনেক। AI সেই পুরোনো ধাঁচ প্রায়ই ফিরিয়ে আনে। কোড চলেও যেতে পারে, তবু সেটি এখনকার পথ নাও হতে পারে।

AI-এর লেখা store হাতে পেলে

• package.json-এর version আর import path সরকারি docs-এর সাথে মিলিয়েছি
• Dev server-এ চালিয়ে console-এর প্রতিটি warning পড়েছি
• React DevTools Profiler বা গণনা দিয়ে দেখেছি, অকারণ render হচ্ছে না
• Store-এ কোনো secret বা token নেই, আর server দাম নিজে হিসাব করে
• Reducer বা store-এর জন্য অন্তত একটি test লিখেছি, আর diff পড়েছি