Cum diferă magazinele ușoare precum Zustand și Jotai de Redux?

Question

Accepted Answer

**Zustand** și **Jotai** sunt biblioteci de stare minimale care realizează starea globală cu mult mai puțin boilerplate decât Redux, și cu **abonări selective** încorporate pentru a evita re-randările inutile. Ele utilizează modele mentale diferite: Zustand este un singur magazin; Jotai este atomic. ## Zustand — un magazin simplu, bazat pe hook-uri ```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 ; } ``` Fără provider, fără acțiuni, fără reduceri, fără dispatch — apelezi direct funcțiile de stabilire. Selectorul (`s => s.count`) înseamnă că componenta se re-randează *doar* când acea felie se schimbă. ## Jotai — stare atomică ```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 construiește starea din **atomi** mici pe care îi compui; componentele se abonează la atomi individuali și se re-randează doar când acei atomi specifici se schimbă. ## Comparație cu 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 ``` ## Când să alegi ce ```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 ``` ## De ce contează Zustand și Jotai reprezintă tendința modernă de îndepărtare de boilerplate-ul Redux către starea globală **minimală, ergonomică** cu abonări selective încorporate (rezolvând problema re-randării Context). Faptul că știi că acestea există — și că Zustand oferă un model de magazin unic și minimal, în timp ce Jotai oferă atomi compozabili — îți permite să alegi un instrument ușor potrivit pentru nevoile de stare globală ale majorității aplicațiilor, rezervând Redux Toolkit mai greu pentru aplicații cu adevărat mari și complexe. Avantajul cheie comun comparativ cu Context este abonarea granulară care previne supra-randarea.