Zustand এবং Jotai-এর মতো হালকা stores কীভাবে Redux থেকে আলাদা?

Question

Accepted Answer

**Zustand** এবং **Jotai** হল ন্যূনতম state লাইব্রেরি যা Redux-এর চেয়ে অনেক কম boilerplate দিয়ে গ্লোবাল state অর্জন করে, এবং অপ্রয়োজনীয় re-render এড়াতে built-in **selective subscriptions** সহ আসে। তারা আলাদা মানসিক মডেল নেয়: Zustand একটি single store; Jotai atomic। ## Zustand — একটি সহজ, hook-ভিত্তিক store ```jsx import { create } from "zustand"; // define a store: state + the actions that update it, all in one place const useStore = create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })), // no actions/reducers/dispatch reset: () => set({ count: 0 }), })); function Counter() { const count = useStore((s) => s.count); // SELECT — re-renders only when count changes const increment = useStore((s) => s.increment); return ; } ``` কোনো provider নেই, কোনো actions নেই, কোনো reducers নেই, কোনো dispatch নেই — আপনি সরাসরি setter ফাংশন কল করেন। selector (`s => s.count`) মানে component *শুধুমাত্র* যখন সেই slice পরিবর্তিত হয় তখনই re-render হয়। ## Jotai — atomic state ```jsx import { atom, useAtom } from "jotai"; const countAtom = atom(0); // a tiny piece of state const doubleAtom = atom((get) => get(countAtom) * 2); // derived atom function Counter() { const [count, setCount] = useAtom(countAtom); // works like useState, but GLOBAL return ; } ``` Jotai ছোট **atoms** থেকে state তৈরি করে যা আপনি রচনা করেন; components ব্যক্তিগত atoms-এ subscribe করে এবং শুধুমাত্র যখন সেই নির্দিষ্ট atoms পরিবর্তিত হয় তখনই re-render হয়। ## Redux-এর সাথে তুলনা ```text Redux (classic) Zustand Jotai Boilerplate high (actions/reducers) very low very low Provider required none minimal Mental model single store + dispatch single store, hooks atomic (useState-like) Re-renders needs selectors selector built-in per-atom (granular) Devtools excellent good good Bundle size larger tiny (~1KB) tiny ``` ## কখন কী বেছে নিন ```text Zustand → simple global state, minimal ceremony (most apps' global needs) Jotai → bottom-up/granular state, lots of independent pieces, derived values Redux(RTK) → very large apps, strict structure, rich devtools/middleware ecosystem ``` ## কেন এটি গুরুত্বপূর্ণ Zustand এবং Jotai Redux-এর boilerplate থেকে দূরে যাওয়ার আধুনিক প্রবণতার প্রতিনিধিত্ব করে **ন্যূনতম, ergonomic** গ্লোবাল state-এর দিকে built-in selective subscriptions সহ (Context-এর re-render সমস্যার সমাধান)। তারা বিদ্যমান জানা — এবং যে Zustand একটি tiny single-store মডেল অফার করে যখন Jotai composable atoms অফার করে — আপনাকে একটি হালকা টুল বেছে নিতে দেয় যা বেশিরভাগ apps-এর গ্লোবাল-state চাহিদার সাথে খাপ খায়, বড় Redux Toolkit রেখে সত্যিকারের বড়, জটিল অ্যাপ্লিকেশনের জন্য। Context-এর উপর মূল ভাগ করা সুবিধা হল granular subscriptions যা over-rendering প্রতিরোধ করে।