Zustand और Jotai जैसे हल्के स्टोर Redux से कैसे अलग हैं?

Question

Accepted Answer

**Zustand** और **Jotai** न्यूनतम स्थिति पुस्तकालय हैं जो Redux की तुलना में बहुत कम boilerplate के साथ वैश्विक स्थिति प्राप्त करते हैं, और अनावश्यक पुनः-रेंडरिंग से बचने के लिए **चयनात्मक सदस्यता** के साथ निर्मित हैं। वे अलग-अलग मानसिक मॉडल लेते हैं: Zustand एक एकल स्टोर है; Jotai परमाणु है। ## Zustand — एक सरल, हुक-आधारित स्टोर ```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 नहीं, कोई action नहीं, कोई reducer नहीं, कोई dispatch नहीं — आप सीधे setter फ़ंक्शन कॉल करते हैं। selector (`s => s.count`) का मतलब है कि component *केवल* जब वह slice बदलता है तभी पुनः-रेंडर होता है। ## Jotai — परमाणु स्थिति ```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** से स्थिति बनाता है जिन्हें आप compose करते हैं; components व्यक्तिगत atoms के लिए subscribe करते हैं और *केवल* तब पुनः-रेंडर होते हैं जब वे विशिष्ट atoms बदलते हैं। ## 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** वैश्विक स्थिति की ओर जिसमें चयनात्मक सदस्यता निर्मित है (Context की पुनः-रेंडरिंग समस्या को हल करना)। यह जानना कि वे मौजूद हैं — और Zustand एक tiny single-store मॉडल प्रदान करता है जबकि Jotai composable atoms प्रदान करता है — आपको एक हल्का उपकरण चुनने देता है जो अधिकांश apps की वैश्विक-state जरूरतों के लिए उपयुक्त है, भारी Redux Toolkit को सच में बड़े, जटिल applications के लिए आरक्षित रखता है। Context पर मुख्य साझी लाभ granular subscriptions हैं जो over-rendering को रोकते हैं।