Jak se jednoduché obchody jako Zustand a Jotai liší od Reduxu?

Question

Accepted Answer

**Zustand** a **Jotai** jsou minimalistické knihovny stavů, které dosahují globálního stavu s mnohem menším boilerplate než Redux a s vestavěnými **selektivními předplatnými** aby se zabránilo zbytečným re-renderings. Používají různé mentální modely: Zustand je jeden obchod; Jotai je atomová. ## Zustand — jednoduchý, hook-based obchod ```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 ; } ``` Žádný provider, žádné actions, žádné reducery, žádný dispatch — přímo voláte funkce setter. Selektor (`s => s.count`) znamená, že se komponenta znovu vykreslí *pouze* když se tento slice změní. ## Jotai — atomový stav ```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 vytváří stav z malých **atomů**, které komponujete; komponenty se přihlášují k individuálním atomům a znovu se vykreslijí pouze když se tyto specifické atomy změní. ## Srovnání s Reduxem ```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 ``` ## Kdy si co vybrat ```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 ``` ## Proč na tom záleží Zustand a Jotai reprezentují moderní trend pryč od Reduxova boilerplatu směrem k **minimalistickému, ergonomickému** globálnímu stavu s vestavěnými selektivními předplatnými (řešící problém re-renderování Context). Znalost, že existují — a že Zustand nabízí malý single-store model, zatímco Jotai nabízí komponovatelné atomy — vám umožňuje zvolit lehký nástroj vyhovující potřebám globálního stavu většiny aplikací a ponechat těžší Redux Toolkit pro skutečně velké, složité aplikace. Klíčová sdílená výhoda oproti Context je granulární přihlášení, které zabraňuje nad-renderování.