Context আর useReducer — prop drilling কমানো

১ · Prop drilling — অনেক হাত ঘুরে আসা খবর

একটি পুরোনো সরকারি অফিস ভাবুন। বড় সাহেবের একটি চিঠি পিয়নের হাতে পৌঁছাতে হবে। চিঠি যায় উপ-পরিচালকের টেবিলে, সেখান থেকে সহকারীর টেবিলে, তারপর বড় বাবুর টেবিলে। মাঝের কেউ চিঠিটি পড়েন না, তবু প্রত্যেকের খাতায় সই লাগে। আর এই প্রথার জন্য সবাইকে চিঠির কথা জানতে হয়।

পর্ব ০৯-এ এই সমস্যার নাম জেনেছেন: prop drilling. মানটি থাকে ওপরে, দরকার হয় অনেক নিচে, আর মাঝের component শুধু props পার করে দেয়। “বাজারঘর”-এ App-এ cart আছে, আর হেডারের ছোট ব্যাজে দরকার মোট সংখ্যা। পথে থাকে Layout আর Header, যারা cart নিয়ে কিছুই করে না।

তাহলে context কাদের জন্য? যে মান বহু দূরের বহু component-এ লাগে, আর কম বদলায়: ভাষা, theme, লগইন করা ব্যবহারকারী। State কোথায় রাখবেন, সেই সিদ্ধান্তের আলোচনা আছে পর্ব ১৬-এ। এখানে আমরা সেই সিদ্ধান্তের একটি হাতিয়ার ধরে দেখব।

২ · Context-এর তিন অংশ — রেডিও স্টেশনের মতো

নিচের live block-এ আসল React 19 চলছে। Panel কোনো theme prop নেয় না, তবু ভেতরের Badge মান পায়। তিনটি অবস্থা দেখুন: provider নেই, একটি provider, আর provider-এর ভেতরে provider. “বদলান” বাটনও চাপুন।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const ThemeContext = createContext('light'); // default মান

function Badge({ label }) {
  const theme = useContext(ThemeContext);
  console.log(label, '->', theme);
  return <p>{label}: <b>{theme}</b></p>;
}
function Panel({ label }) {   // Panel জানেই না theme কী
  return <Badge label={label} />;
}
function App() {
  const [theme, setTheme] = useState('dark');
  const flip = () => setTheme(t => (t === 'dark' ? 'light' : 'dark'));
  return (
    <>
      <Panel label="no provider" />
      <ThemeContext value={theme}>
        <Panel label="outer" />
        <ThemeContext value="sepia"><Panel label="inner" /></ThemeContext>
      </ThemeContext>
      <button onClick={flip}>বদলান</button>
    </>
  );
}
createRoot(document.getElementById('root')).render(<App />);
</script>

Default মান — শেষ ভরসা, প্রধান পথ নয়

createContext-এর মান শুধু তখনই আসে, যখন ওপরে কোনো provider-ই নেই। Docs এটিকে “last resort” বলে, আর এটি কখনো বদলায় না। Provider থাকলে কিন্তু value না দিলে, default আসে না, আসে undefined. সত্যিকারের run-এ (React 19.3.1 development build, jsdom-এ) দেখুন:

<T>              -> value read: undefined
<T theme="dark"> -> value read: undefined
<T.Provider value="dark"> -> value read: dark
(provider নেই)    -> value read: light

console.error: The `value` prop is required for the `<Context.Provider>`.
Did you misspell it or forget to pass it?

তাই যে context-এর অর্থপূর্ণ default নেই, যেমন cart, সেখানে createContext(null) লিখুন। তাহলে পরে “provider ভুলে গেছি” ভুলটি স্পষ্ট error দিয়ে ধরা যায়। অংশ ৬-এ সেটি করব।

React 19-এ যা বদলেছে

use hook নয়। Docs অনুযায়ী একে if বা লুপের ভেতরে ডাকা যায়, যা useContext-এ যায় না। তবে একে try/catch-এর ভেতরে ডাকা যাবে না। Provider খোঁজার নিয়ম দুটিতেই এক। শুধু একটি জায়গায় মান লাগলে এটি কাজের:

import { use } from 'react';

function Divider({ show }) {
  if (!show) return null;
  const theme = use(ThemeContext); // শর্তের পরে পড়া, use-এ চলে
  return <hr className={theme} />;
}

৩ · Context কী নয় — আর এর আসল খরচ

“Context ব্যবহার করে state management করছি।” এই বাক্যটি খুব শোনা যায়, কিন্তু কথাটি ঠিক নয়। Context নিজে কিছু রাখে না, কিছু বদলায় না। এটি শুধু একটি মান পৌঁছে দেয়। মান রাখছে useState বা useReducer. Redux-এর রক্ষণাবেক্ষণকারী Mark Erikson ২০২১ সালের এক লেখায় context-কে বলেছেন “transport mechanism”, আর একে dependency injection-এর একটি রূপ বলেছেন।

এবার ধাপে ধাপে দেখুন। ThemeProvider নিজের children পায় বাইরে থেকে। ট্রিতে দুজন consumer আছে: Badge আর ThemeButton. বাকিরা context পড়ে না।

এখান থেকে context-এর আসল সীমা বোঝা যায়। Provider যদি { count, add } একসাথে দেয়, আর কোনো component শুধু add পড়ে, তবু count বদলালে সে render হবে। Context-এ “শুধু এই অংশটুকু” বলার উপায় নেই। React 19.3.1-এর export-এ লেখার সময়ে useContextSelector জাতীয় কিছু নেই; আমরা export তালিকা দেখে নিশ্চিত হয়েছি।

Context কোথায় মানায়, কোথায় মানায় না

৪ · Context ভাগ করা আর মান memoise করা

সমাধান দুটি। ভাগ করা: যে মান একসাথে বদলায় না, তাদের আলাদা context-এ রাখা। Memoise করা: value object হলে useMemo দিয়ে তার reference স্থির রাখা। ফাংশন হলে useCallback. পর্ব ১৪-এ এদের দেখেছেন।

নিচের block-এ একই পাতায় দুই সংস্করণ আছে। ওপরে এক context, নিচে ভাগ করা। দুই জায়গাতেই Btn শুধু লেখে, Show শুধু পড়ে। দুটি বাটনই চেপে লগ দেখুন।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const Big = createContext(null);
const Count = createContext(0);
const Add = createContext(null);
function BigProvider({ children }) {
  const [n, setN] = useState(0);
  const value = useMemo(() => ({ n, setN }), [n]);
  return <Big value={value}>{children}</Big>;
}
function SplitProvider({ children }) {
  const [n, setN] = useState(0);
  return <Add value={setN}><Count value={n}>{children}</Count></Add>;
}
const inc = x => x + 1;
const Btn1 = memo(() => { const { setN } = useContext(Big);
  console.log('one: Btn'); return <button onClick={() => setN(inc)}>এক +1</button>; });
const Show1 = memo(() => { const { n } = useContext(Big);
  console.log('one: Show'); return <b> {n} </b>; });
const Btn2 = memo(() => { const setN = useContext(Add);
  console.log('split: Btn'); return <button onClick={() => setN(inc)}>ভাগ +1</button>; });
const Show2 = memo(() => { const n = useContext(Count);
  console.log('split: Show'); return <b> {n} </b>; });
createRoot(document.getElementById('root')).render(<>
  <BigProvider><Btn1 /><Show1 /></BigProvider><hr />
  <SplitProvider><Btn2 /><Show2 /></SplitProvider>
</>);
</script>

CartContext ─ value = { count, add }
   │
   ├─ Header (count পড়ে)
   └─ ProductCard × 20 (add পড়ে)

CartCountContext ─ value = count
   └─ Header
CartActionsContext ─ value = add (স্থির)
   └─ ProductCard × 20

মেপে দেখা হিসাব

React 19.3.1 development build-এ ২০টি memo করা কার্ড, ১টি হেডার আর ১০ বার click দিয়ে গোনা। এখানে সময় নয়, render-সংখ্যা গোনা হয়েছে, তাই অন্য কম্পিউটারেও একই সংখ্যা আসার কথা।

after 10 clicks one-context {"Header":10,"Card":200}
after 10 clicks split       {"Header":10}
inline object, same data, 3 parent renders: {"Reader":3}

কিন্তু সবসময় ভাগ করবেন না। Theme বছরে কয়েকবার বদলালে ২১টি render কোনো সমস্যা নয়। আর React Compiler চালু থাকলে inline object অনেক ক্ষেত্রে নিজেই স্থির হতে পারে, তবে ভাগ করার কাজটি সে করে দেয় না। আগে মাপুন, তারপর ভাগ করুন।

Value memoise করা — কখন, কীভাবে

কখনো মান ভাগ করা যায় না, কারণ user আর login একসাথেই দরকার। তখন object-টি স্থির রাখুন। নিচের কোডটি React docs-এর নকশা অনুসরণ করে। useMemo ছাড়া AuthProvider-এর parent render হলেই সব consumer render হতো। এখন শুধু user বদলালে হবে।

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const logout = useCallback(() => setUser(null), []);
  const value = useMemo(() => ({ user, logout }), [user, logout]);

  return <AuthContext value={value}>{children}</AuthContext>;
}

মান যদি সংখ্যা বা লেখার মতো primitive হয়, useMemo লাগে না; Object.is সরাসরি মান মেলায়। আর এখানে প্রমাণ বা token কীভাবে রাখবেন, সেটি context-এর বিষয় নয়। তার পথ দেখবেন পর্ব ৪৫ আর পর্ব ৪৬-এ।

Children pattern — Provider-কে আলাদা component করুন

উপরের সব উদাহরণে provider একটি আলাদা component, যে children নেয়। এটি শুধু গোছানোর জন্য নয়। App-এর ভেতরেই state রেখে provider লিখলে state বদলালে App render হবে, তার সাথে তার JSX-এর সব child-ও। আলাদা CartProvider-এ children আসে বাইরে থেকে, তাই state বদলালেও সেই element একই থাকে। ফলে শুধু consumer render হয়। মাপা run-এও তাই দেখা গেছে: context না পড়া component ১০ click-এ একবারও render হয়নি।

আরেকটি কথা। Provider যত নিচে বসানো যায়, তত ভালো। Cart শুধু দোকানের অংশে লাগলে admin-এর পাতায় CartProvider রাখার দরকার নেই। এতে consumer-এর সংখ্যা কমে, আর কোডের সীমানাও স্পষ্ট হয়। সব provider main.jsx-এ জমা করা একটি সাধারণ অভ্যাস, কিন্তু সেটি জরুরি নয়।

৫ · useReducer — হিসাব খাতার নিয়ম

এবার অন্য একটি সমস্যা। cart-এ যোগ, কমানো, মুছে ফেলা, খালি করা, সব জায়গায় আলাদা setItems ছড়িয়ে থাকলে একদিন একই নিয়ম দুই জায়গায় দুইভাবে লেখা হবে। যেমন এক জায়গায় qty ০ হলে লাইন মোছে, অন্য জায়গায় মোছে না।

গঠনটি ছোট। useReducer(reducer, initialState) ফেরত দেয় [state, dispatch]. Reducer-এর চেহারা সবসময় এক: (state, action) => নতুন state. Array-র reduce-এ যে function দেন, সেটিও একই আকারের, নামটিও সেখান থেকে। Action সাধারণত একটি object, যেখানে type বলে কী ঘটেছে। নাম দিন ঘটনার মতো: 'added', 'removed', setItems-এর মতো আদেশ নয়।

এখন এক click-এর পুরো পথ দেখুন। ধরুন cart খালি, আর ব্যবহারকারী “মসুর ডাল” যোগ করছেন। খেয়াল করুন reducer ঠিক কখন চলে।

1function Shop() {2  const [state, dispatch] = useReducer(cartReducer, { items: [] });3  function handleClick() {4    dispatch({ type: 'added', item: dal });5    console.log(state.items.length);6  }7  return <button onClick={handleClick}>কার্ট: {state.items.length}</button>;8}9function cartReducer(state, action) {10  if (action.type === 'added') return { items: [...state.items, action.item] };11  return state;12}

এই ক্রম মুখের কথা নয়। React 19.3.1-এর development build-এ লগ বসিয়ে সত্যিকারের run-এর আউটপুট (StrictMode ছাড়া):

== click
dispatch-এর আগে count = 0
dispatch-এর পরে count = 0
Cart render শুরু
  reducer চলছে {"state":{"count":0},"action":{"type":"add"}}
Cart render শেষ, count = 1
Child render
== same state (noop)
Cart render শুরু
  reducer চলছে {"state":{"count":1},"action":{"type":"noop"}}
Cart render শেষ, count = 1
== two dispatches in one tick
Cart render শুরু
  reducer চলছে {"state":{"count":1},"action":{"type":"add"}}
  reducer চলছে {"state":{"count":2},"action":{"type":"add"}}
Cart render শেষ, count = 3
Child render

তিনটি জিনিস লক্ষ করুন। Reducer চলেছে render-এর ভেতরে। Reducer একই state ফেরত দিলে Cart একবার চলেছে, কিন্তু Child render হয়নি; docs-এর “skip” কথাটি মূলত children-এর জন্য। আর এক tick-এ দুটি dispatch হলে একটিই render, reducer দুবার। সব action সারি ধরে চলে, তাই পরেরটি আগের ফল পায়।

Reducer কেন pure হতে হবে

Pure function মানে একই ইনপুটে একই ফল, আর বাইরের কিছু না বদলানো। Reducer render-এর ভেতরে চলে, আর render যেকোনো সংখ্যকবার চলতে পারে। তাই ভেতরে fetch, localStorage.setItem, Math.random() বা Date.now() রাখা যাবে না। এলোমেলো id বা সময় লাগলে সেটি event handler-এ তৈরি করে action-এ পাঠান।

StrictMode development-এ reducer দুবার ডেকে এই ভুল ধরিয়ে দেয়, আর একটি ফল ফেলে দেয়। সত্যিকারের run-এ এক dispatch-এ পুরোনো state বদলানো (state.items.push) আর ঠিক reducer পাশাপাশি:

impure reducer calls: 2 items: ["dal","dal"]
pure   reducer calls: 2 items: ["dal"]

এক click-এ দুটি ডাল! এটি production-এ ধরা পড়ত না, আর react-lab.js-এর live block-এও দেখবেন না, কারণ সেটি production build. Development-এ দেখলে StrictMode-কে দোষ দেবেন না, reducer ঠিক করুন।

শুরুর state — তৃতীয় argument

পুরো স্বাক্ষরটি হলো useReducer(reducer, initialArg, init?). init দিলে শুরুর state হয় init(initialArg). শুরুর মান তৈরি করা ভারী হলে এটি কাজে লাগে, কারণ React একে শুধু শুরুতে ডাকে। Function-টি নিজে পাঠান, তার ফল নয়। StrictMode-এ reducer-এর মতো init-ও দুবার চলে, তাই এতে কিছু লেখা বা পাঠানো চলবে না।

function emptyCart(owner) {
  return { owner, items: [] };
}
// ঠিক: React দরকারমতো একবার ডাকবে
const [state, dispatch] = useReducer(cartReducer, 'guest', emptyCart);

আর পরের state কী হবে তা handler-এই জানতে চাইলে reducer-কে নিজেই ডাকতে পারেন: const next = cartReducer(state, action);. Docs-ও এই পথ দেখায়। Reducer সাধারণ function বলেই এটি সম্ভব।

useState না useReducer?

একটি toggle-এ useReducer শুধু বাড়তি লেখা। আবার useReducer মানেই ভালো কোড নয়; এটি রুচি ও আকারের প্রশ্ন, আর React docs দুটিকেই ঠিক বলে। একটি ভালো সংকেত: setA, setB, setC একসাথে ডাকতে হচ্ছে, আর ভুলে একটি বাদ পড়লে অবস্থা অসঙ্গত হয়। তখন reducer নিন।

৬ · Context + reducer — বাজারঘরের cart

এবার দুটি জোড়া দিই। Reducer জানে কীভাবে state বদলাবে। Context জানে কীভাবে দূরে পৌঁছাবে। দুটি মিলিয়ে নিচের গঠনটি React docs-এর “Scaling Up with Reducer and Context” পরামর্শ অনুযায়ী লেখা। state আর dispatch আলাদা context-এ থাকে, কারণ docs অনুযায়ী dispatch-এর পরিচয় স্থির। অংশ ৪-এর লাভ তাই বিনা খরচে মেলে।

নিচের live block-এ পুরো cart আছে। দুটি পণ্যের বাটন চেপে দেখুন। কোন component-এর লগ আসে, আর কারটি আসে না।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
function cartReducer(state, action) {
  switch (action.type) {
    case 'added': {
      if (!state.items.some(i => i.id === action.item.id))
        return { items: [...state.items, { ...action.item, qty: 1 }] };
      return { items: state.items.map(i => i.id === action.item.id ? { ...i, qty: i.qty + 1 } : i) };
    }
    case 'cleared': return { items: [] };
    default: throw new Error('অজানা action: ' + action.type);
  }
}
const StateCtx = createContext(null), DispatchCtx = createContext(null);
function CartProvider({ children }) {
  const [state, dispatch] = useReducer(cartReducer, { items: [] });
  return <DispatchCtx value={dispatch}><StateCtx value={state}>{children}</StateCtx></DispatchCtx>;
}
function useCart() {
  const { items } = useContext(StateCtx);
  return { count: items.reduce((n, i) => n + i.qty, 0), total: items.reduce((s, i) => s + i.price * i.qty, 0) };
}
const Header = () => { const { count, total } = useCart(); console.log('Header', count, total);
  return <h3>🛒 {count}টি · ৳{total}</h3>; };
const Add = memo(({ item }) => { const dispatch = useContext(DispatchCtx); console.log('Add', item.name);
  return <button onClick={() => dispatch({ type: 'added', item })}>{item.name} ৳{item.price}</button>; });
const dal = { id: 1, name: 'ডাল', price: 140 }, tel = { id: 2, name: 'তেল', price: 190 };
createRoot(document.getElementById('root')).render(<CartProvider><Header /><Add item={dal} /><Add item={tel} /></CartProvider>);
</script>

useCart কেন আলাদা hook

Component যদি সরাসরি useContext(StateCtx) লেখে, তিনটি সমস্যা হয়। Context object সবাইকে জানাতে হয়। Provider ভুলে গেলে null-এর ওপর ত্রুটি আসে, যার অর্থ বোঝা কঠিন। আর হিসাবের কোড প্রতিটি component-এ ঘোরে। একটি custom hook তিনটিই সমাধান করে। ভেতরে কী আছে তা বাকি অ্যাপ জানে না, তাই পরে Zustand-এ গেলে শুধু এই ফাইলটি বদলাবে।

Cart সেভ করবেন কোথায়

Reducer-এ cart-এর localStorage-এ সেভ করার জায়গা নেই। সেটি হবে CartProvider-এর একটি effect-এ, যা state বদলালে চলে। পর্ব ১৩ মনে করুন। পড়ার কাজটি হবে init-এ। তবে localStorage পড়া মানে বাইরের জগৎ পড়া, আর সেখানকার ডেটা নষ্টও হতে পারে। তাই পড়ার সময় try রাখুন, আর ভুল পেলে খালি cart দিন।

function loadCart() {
  try {
    const raw = localStorage.getItem('bazarghar-cart');
    return raw ? JSON.parse(raw) : { items: [] };
  } catch {
    return { items: [] };   // নষ্ট ডেটা বা ব্লক করা storage
  }
}

function CartProvider({ children }) {
  const [state, dispatch] = useReducer(cartReducer, undefined, loadCart);

  useEffect(() => {
    localStorage.setItem('bazarghar-cart', JSON.stringify(state));
  }, [state]);
  // … provider দুটি আগের মতোই
}

Live block-এর sandbox-এ localStorage বন্ধ থাকতে পারে, তাই এটি jsdom-এর আসল localStorage-এ চালানো হয়েছে। সত্যিকারের run-এ remount-এর পরে cart ফিরে এলো, আর নষ্ট ডেটায় খালি cart পাওয়া গেল:

after add   : {"items":[{"id":1,"qty":2}]}
after reload: {"items":[{"id":1,"qty":2}]}
corrupt data: {"items":[]}

Next.js-এ সার্ভারে localStorage নেই, তাই সেখানে এই পথ বদলাতে হবে; পর্ব ৫৬-এ hydration দেখবেন। Cart-এ শুধু পণ্যের id আর qty রাখাই নিরাপদ। দাম ব্রাউজার থেকে বিশ্বাস করবেন না, অর্ডারের সময় সার্ভারে আবার হিসাব করুন। আর সার্ভারে রাখা cart হলে সেটি server state, যার পথ আছে পর্ব ১৯-এ।

৭ · TSX-এ typed action — ভুল action ধরে দেওয়া

JavaScript-এ dispatch({ type: 'add' }) লিখলে, যেখানে 'added' হওয়ার কথা, ভুলটি ধরা পড়বে শুধু চালানোর সময়। TypeScript-এর discriminated union এই ভুল লেখার সময়েই ধরে। পর্ব ০৬-এ এটি দেখেছেন। এবার কাজে লাগাই। type ঘরটি দেখে TypeScript বোঝে কোন action-এ আর কোন ঘর আছে।

export type CartItem = { id: number; name: string; price: number; qty: number };
export type CartState = { items: CartItem[] };

export type CartAction =
  | { type: "added"; item: Omit<CartItem, "qty"> }
  | { type: "qty_set"; id: number; qty: number }
  | { type: "removed"; id: number }
  | { type: "cleared" };

function assertNever(x: never): never {
  throw new Error("অজানা action: " + JSON.stringify(x));
}

export function cartReducer(state: CartState, action: CartAction): CartState {
  switch (action.type) {
    case "added": {
      const found = state.items.find((i) => i.id === action.item.id);
      if (found) {
        return {
          items: state.items.map((i) =>
            i.id === found.id ? { ...i, qty: i.qty + 1 } : i,
          ),
        };
      }
      return { items: [...state.items, { ...action.item, qty: 1 }] };
    }
    case "qty_set":
      if (action.qty <= 0) {
        return { items: state.items.filter((i) => i.id !== action.id) };
      }
      return {
        items: state.items.map((i) =>
          i.id === action.id ? { ...i, qty: action.qty } : i,
        ),
      };
    case "removed":
      return { items: state.items.filter((i) => i.id !== action.id) };
    case "cleared":
      return { items: [] };
    default:
      return assertNever(action);
  }
}

export const cartTotal = (s: CartState) =>
  s.items.reduce((sum, i) => sum + i.price * i.qty, 0);

এবার ভুলগুলো ইচ্ছা করে লিখে tsc চালাই। সত্যিকারের run, TypeScript 6.0.3 (লেখার সময়ে), strict চালু:

$ npx tsc -p .
src/bad.ts(3,18): error TS2322: Type '"add"' is not assignable to type
  '"added" | "qty_set" | "removed" | "cleared"'.
src/bad.ts(4,16): error TS2345: Argument of type '{ type: "qty_set"; id: number; }'
  is not assignable to parameter of type 'CartAction'.
  Property 'qty' is missing in type '{ type: "qty_set"; id: number; }' but required
  in type '{ type: "qty_set"; id: number; qty: number; }'.

প্রথমটিতে বানান ভুল, দ্বিতীয়টিতে qty নেই। দুটিই চালানোর আগেই ধরা পড়ল। আরও ভালো হলো assertNever-এর কাজ, যা একটি exhaustive check. default-এ পৌঁছে action-এর type হয় never, কারণ সব case শেষ। এখন ধরুন কেউ case "cleared" মুছে দিলেন, বা নতুন action যোগ করে case লিখতে ভুলে গেলেন:

$ npx tsc -p tsconfig.miss.json
src2/cartReducer.ts(39,26): error TS2345: Argument of type '{ type: "cleared"; }'
  is not assignable to parameter of type 'never'.

Compiler নাম ধরে বলে দিল কোন action বাদ পড়েছে। বড় টিমে নতুন action যোগ করলে এই একটি লাইনই reducer-এর সব ফাঁক দেখিয়ে দেয়। Provider-এর typed রূপটি নিচে; এটিও tsc-এ শূন্য error দিয়ে পাস করেছে। use নেওয়া হয়নি, কারণ hook-এর ওপরের স্তরে পড়ছি, যেখানে useContext-ই যথেষ্ট।

import { createContext, useContext, useReducer } from "react";
import type { Dispatch, ReactNode } from "react";
import { cartReducer, cartTotal } from "./cartReducer";
import type { CartAction, CartState } from "./cartReducer";

const CartStateContext = createContext<CartState | null>(null);
const CartDispatchContext = createContext<Dispatch<CartAction> | null>(null);

export function CartProvider({ children }: { children: ReactNode }) {
  const [state, dispatch] = useReducer(cartReducer, { items: [] });
  return (
    <CartDispatchContext value={dispatch}>
      <CartStateContext value={state}>{children}</CartStateContext>
    </CartDispatchContext>
  );
}

export function useCart() {
  const state = useContext(CartStateContext);
  if (state === null) throw new Error("useCart must be used inside <CartProvider>");
  const count = state.items.reduce((n, i) => n + i.qty, 0);
  return { items: state.items, count, total: cartTotal(state) };
}

export function useCartDispatch() {
  const dispatch = useContext(CartDispatchContext);
  if (dispatch === null) throw new Error("useCartDispatch must be used inside <CartProvider>");
  return dispatch;
}

if (state === null) লাইনের পরে TypeScript জানে state আর null নয়। এটি narrowing. তাই ব্যবহারকারী component-কে state?.items লিখতে হয় না।

৮ · Reducer test — React ছাড়াই

Reducer-এর সবচেয়ে সুন্দর দিক এটি। সে একটি সাধারণ function. Browser লাগে না, DOM লাগে না, React-ও লাগে না। ইনপুট দিন, ফল মেলান। দাম, qty আর মুছে ফেলার সব নিয়ম এক ঝটকায় যাচাই হয়ে যায়। নিচের block-এ কোনো test library নেই, শুধু হাতে লেখা assertion. শেষ test-টি ইচ্ছা করেই একটি ভুল reducer ধরছে।

'use strict';
function cartReducer(state, action) {
  if (action.type === 'added') {
    const has = state.items.some(i => i.id === action.item.id);
    if (!has) return { items: [...state.items, { ...action.item, qty: 1 }] };
    return { items: state.items.map(i => i.id === action.item.id ? { ...i, qty: i.qty + 1 } : i) };
  }
  if (action.type === 'qty_set') {
    if (action.qty <= 0) return { items: state.items.filter(i => i.id !== action.id) };
    return { items: state.items.map(i => i.id === action.id ? { ...i, qty: action.qty } : i) };
  }
  throw new Error('unknown action: ' + action.type);
}
function badReducer(state, action) { state.items.push(action.item); return state; } // ভুল
function test(name, fn) {
  try { fn(); console.log('PASS', name); }
  catch (e) { console.log('FAIL', name, '-', e.message); }
}
function same(a, b) { const x = JSON.stringify(a), y = JSON.stringify(b);
  if (x !== y) throw new Error(x + ' != ' + y); }
const dal = { id: 1, name: 'dal', price: 140 };
const frozen = () => Object.freeze({ items: Object.freeze([]) });
test('new item gets qty 1', () => same(
  cartReducer(frozen(), { type: 'added', item: dal }).items[0].qty, 1));
test('same item twice: qty 2, one line', () => {
  const s1 = cartReducer(frozen(), { type: 'added', item: dal });
  const s2 = cartReducer(s1, { type: 'added', item: dal });
  same([s2.items.length, s2.items[0].qty], [1, 2]);
});
test('qty 0 removes the line', () => {
  const s1 = cartReducer(frozen(), { type: 'added', item: dal });
  same(cartReducer(s1, { type: 'qty_set', id: 1, qty: 0 }).items, []);
});
test('bad reducer on frozen state', () => badReducer(frozen(), { item: dal }));

বাস্তব প্রজেক্টে একই কাজ করে Vitest. উপরের TypeScript reducer-এর জন্য লেখা একটি test, আর সত্যিকারের run (Vitest 5.0.5, React 19.3.1, Node 24, লেখার সময়ে):

import { describe, expect, it } from "vitest";
import { cartReducer, cartTotal, type CartState } from "./cartReducer";

const dal = { id: 1, name: "মসুর ডাল", price: 140 };
const tel = { id: 2, name: "সয়াবিন তেল", price: 190 };
const empty: CartState = { items: [] };

describe("cartReducer", () => {
  it("মোট হিসাব: 2 x 140 + 1 x 190 = 470", () => {
    let s = cartReducer(empty, { type: "added", item: dal });
    s = cartReducer(s, { type: "added", item: dal });
    s = cartReducer(s, { type: "added", item: tel });
    expect(cartTotal(s)).toBe(470);
  });
  // … আরও চারটি it(): নতুন পণ্য, একই পণ্য, qty 0, পুরোনো state না বদলানো
});

$ npx vitest run --reporter=verbose src/cartReducer.test.ts

 RUN  v5.0.5 ~/bazarghar

 ✓ src/cartReducer.test.ts > cartReducer > নতুন পণ্য যোগ করলে qty হয় 1 1ms
 ✓ src/cartReducer.test.ts > cartReducer > একই পণ্য আবার যোগ করলে qty বাড়ে, নতুন লাইন হয় না 1ms
 ✓ src/cartReducer.test.ts > cartReducer > qty 0 হলে লাইনটি মুছে যায় 0ms
 ✓ src/cartReducer.test.ts > cartReducer > পুরোনো state বদলায় না 0ms
 ✓ src/cartReducer.test.ts > cartReducer > মোট হিসাব: 2 x 140 + 1 x 190 = 470 0ms

 Test Files  1 passed (1)
      Tests  5 passed (5)

Component test লাগলেও reducer test আগে করুন, কারণ এটি দ্রুত আর স্থির। Unit test-এর তত্ত্ব আছে Software Engineering কোর্সে, Vitest-এর পুরো ব্যবহার পর্ব ৭৩-এ, আর component test পর্ব ৭৪-এ।

৯ · কখন Zustand বা Redux-এ যাবেন

Context + reducer অনেক ছোট ও মাঝারি অ্যাপে যথেষ্ট, আর কোনো বাড়তি dependency লাগে না। তবে এর একটি সীমা স্থায়ী: cart বদলালে useCart ব্যবহার করা সবাই render হয়, যে শুধু count চায় সেও। Store library-গুলো এখানে অন্যভাবে কাজ করে। State থাকে React-এর বাইরে, useSyncExternalStore-এর মতো পথে component সাবস্ক্রাইব করে, আর selector দিয়ে শুধু দরকারি অংশ বেছে নেয়।

লেখার সময়ে npm-এ zustand 5.0.16 আর @reduxjs/toolkit 2.13.0. কোনটি “সেরা” তা নিয়ে সমাজে মতভেদ আছে। অনেক টিম Zustand-এর সরলতা পছন্দ করে, অনেক বড় টিম Redux-এর কাঠামো ও টুল চায়, আর কেউ বলেন বেশিরভাগ অ্যাপে context-ই যথেষ্ট। যাওয়ার আগে একটি প্রশ্ন করুন: সমস্যাটি কি মাপা হয়েছে? useCart hook-এর পেছনে সব লুকানো থাকলে পরে বদলানো সস্তা, তাই আগেভাগে library আনার দরকার নেই। দুটির বিস্তারিত পাবেন পর্ব ১৮ · Zustand আর Redux Toolkit-এ।

১০ · AI-এর যুগে Context আর reducer

“একটি cart বানিয়ে দাও” বললে AI সহজেই চলনসই কোড দেবে। কোড চলবেও। সমস্যা ধরা পড়ে পরে, যখন অ্যাপ বড় হয়। AI আপনার অ্যাপের render-সংখ্যা মাপে না, তাই এই কাজ আপনার।

AI-এর দেওয়া context কোড হাতে পেলে

• package.json-এর diff দেখেছি; অপ্রয়োজনীয় package নেই, আর সবগুলো সত্যিই আছে
• নিজের React version-এর জন্য react.dev-এ API মিলিয়েছি
• value কি প্রতি render-এ নতুন object? দেখেছি
• Reducer-এ বাইরের কিছু ছোঁয়া হচ্ছে না, আর state বদলানো হচ্ছে না; freeze test পাস করেছে
• Profiler চালিয়ে দেখেছি কে কতবার render হয়
• Provider ছাড়া hook ডেকে দেখেছি; পরিষ্কার error আসে, চুপচাপ undefined নয়
• কোনো secret client-এর context বা কোডে নেই