Zustand మరియు Jotai వంటి తేలికైన దుకాణాలు Redux నుండి ఎలా భిన్నంగా ఉన్నాయి?

Question

Accepted Answer

**Zustand** మరియు **Jotai** అనేవి Redux కంటే చాలా తక్కువ boilerplate తో గ్లోబల్ స్టేట్‌ను సాధించే కనిష్ట స్టేట్ లైబ్రరీలు, మరియు అనవసరమైన పునర్నిర్మాణాలను నివారించడానికి **ఎంపిక చేసిన సభ్యతలు** కలిగి ఉన్నాయి. అవి వేర్వేరు మానసిక నమూనాలను తీసుకుంటాయి: Zustand ఒక దుకాణం; Jotai పరమాణువు. ## Zustand — సాధారణ, hook-ఆధారిత దుకాణం ```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 ; } ``` ప్రదానకర్త లేనిది, చర్యలు లేనిది, రిడ్యూసర్‌లు లేనిది, డిస్‌పాచ్ లేనిది — మీరు సెట్టర్ ఫంక్షన్‌లను నేరుగా కాల్ చేస్తారు. సెలెక్టర్ (`s => s.count`) అంటే కాంపోనెంట్ *కేవలం* ఆ స్లైస్ మారినప్పుడు మాత్రమే పునర్నిర్మించబడుతుంది. ## 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 చిన్న **పరమాణువుల** నుండి స్టేట్‌ను నిర్మిస్తుంది మీరు కంపోజ్ చేస్తారు; కంపోనెంట్‌లు వ్యక్తిగత పరమాణువులకు సభ్యత్వం పొందుతాయి మరియు ఆ నిర్దిష్ట పరమాణువులు మారినప్పుడు మాత్రమే పునర్నిర్మించబడతాయి. ## 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 ఒక చిన్న single-store మోడల్‌ను అందిస్తుంది అయితే Jotai కంపోజేబుల్ పరమాణువులను అందిస్తుంది — చాలా అనువర్తనాల గ్లోబల్-స్టేట్ అవసరాలకు సరిపోయే ఒక తేలికైన సాధనాన్ని ఎంచుకోవడానికి మిమ్మల్ని అనుమతిస్తుంది, నిజమైన పెద్ద, సంక్లిష్ట అనువర్తనాల కోసం భారీ Redux Toolkit ను ప్రిక్షిప్తం చేస్తుంది. Context కంటే ముఖ్య సమర్థవంత ప్రయోజనం చేదు-రెండరించడాన్ని నిరోధించే విస్తృత సభ్యతలు.