Jak lekkie magazyny stanu takie jak Zustand i Jotai różnią się od Redux?

Question

Accepted Answer

**Zustand** i **Jotai** to minimalne biblioteki stanu, które osiągają stan globalny z znacznie mniejszą ilością boilerplate'u niż Redux i z wbudowanymi **selektywnymi subskrypcjami**, aby uniknąć niepotrzebnych re-renderów. Używają różnych modeli myślenia: Zustand to jeden magazyn; Jotai jest atomowy. ## Zustand — prosty magazyn oparty na hookach ```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 ; } ``` Bez providera, bez akcji, bez reduktorów, bez dispatch — bezpośrednio wywołujesz funkcje settera. Selektor (`s => s.count`) oznacza, że komponent re-renderuje się *tylko* gdy ta część się zmienia. ## Jotai — stan atomowy ```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 buduje stan z małych **atomów**, które komponujesz; komponenty subskrybują się na poszczególne atomy i re-renderują się tylko gdy te konkretne atomy się zmieniają. ## Porównanie z 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 ``` ## Kiedy wybrać co ```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 ``` ## Dlaczego to ważne Zustand i Jotai reprezentują nowoczesny trend odchodzenia od boilerplate'u Redux'a w stronę **minimalnego, ergonomicznego** stanu globalnego z wbudowanymi selektywnymi subskrypcjami (rozwiązując problem re-renderów Contextu). Wiedza o ich istnieniu — i że Zustand oferuje malutki model jednego magazynu, podczas gdy Jotai oferuje składalne atomy — pozwala ci wybrać lekie narzędzie pasujące do potrzeb stanu globalnego większości aplikacji, rezerwując cięższy Redux Toolkit dla naprawdę dużych, złożonych aplikacji. Kluczową wspólną zaletą nad Contextem są granularne subskrypcje, które zapobiegają nadmiernemu renderowaniu.