Kuo skiriasi lengvi saugyklai, tokie kaip Zustand ir Jotai, nuo Redux?

Question

Accepted Answer

**Zustand** ir **Jotai** yra minimalios valstybės bibliotekos, kurios pasiekia globalią būseną su daug mažiau standartinio kodo nei Redux ir su įtaisytais **selektyviais abonementais**, siekiant išvengti nereikalingų re-rendering'ų. Jie naudoja skirtingus minties modelius: Zustand yra viena saugykla; Jotai yra atominė. ## Zustand — paprasta, hook'ais pagrįsta saugykla ```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 ; } ``` Nėra tiekėjo, nėra veiksmų, nėra reduktorių, nėra išsiuntos — tiesiogiai iškviečiate nustatymo funkcijas. Selektorius (`s => s.count`) reiškia, kad komponentas iš naujo renderinamas *tik* kai tas pjūvis pasikeičia. ## Jotai — atominė būsena ```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 konstruoja būseną iš mažų **atomų**, kuriuos jūs komponuojate; komponentai prenumeruoja atskirus atomus ir iš naujo renderinami tik tada, kai tie konkretūs atomai pasikeičia. ## Palyginimas su 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 ``` ## Kada rinktis ką ```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 ``` ## Kodėl tai svarbu Zustand ir Jotai atspindi šiuolaikinę tendenciją traukiantis nuo Redux standartinio kodo link **minimalios, ergonomiškai** globalios būsenos su įtaisytais selektyviais abonementais (išsprendžiant Context re-rendering problemą). Žinodami, kad jie egzistuoja — ir kad Zustand siūlo mažą vienos saugyklos modelį, o Jotai siūlo komponuojamus atomus — galite pasirinkti lengvą įrankį, atitinkantį daugumos programų globalios būsenos poreikius, palikdami sunkesnį Redux Toolkit iš tikrųjų didelėms ir sudėtingoms programoms. Pagrindinė bendra privalumas prieš Context yra granuliniai abonementai, kurie neleidžia per daugiau renderinti.