Miben különböznek az olyan könnyű tárolók, mint a Zustand és a Jotai a Redux-tól?

Question

Accepted Answer

A **Zustand** és a **Jotai** minimális állapot-könyvtárak, amelyek globális állapotot érnek el sokkal kevesebb boilerplate-tel, mint a Redux, és beépített **szelektív előfizetésekkel** az szükségtelen újrarenderelések elkerülésére. Eltérő mentális modelleket követnek: a Zustand egy egyetlen tár; a Jotai atomi. ## Zustand — egyszerű, hook-alapú tár ```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 ; } ``` Nincs provider, nincs action, nincs reducer, nincs dispatch — közvetlenül setter funkciókat hívasz meg. A selektor (`s => s.count`) azt jelenti, hogy az komponens *csak* akkor renderelődik újra, amikor az a szelet megváltozik. ## Jotai — atomi állapot ```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 ; } ``` A Jotai kis **atomokból** építi fel az állapotot, amelyeket komponálsz; az összetevők egyedi atomokra iratkoznak fel, és csak akkor renderelődnek újra, amikor az adott atomok megváltoznak. ## Összehasonlítás a Redux-szal ```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 ``` ## Mikor mit válasszunk ```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 ``` ## Miért fontos ez A Zustand és a Jotai a Redux boilerplate-jétől való modern eltávolodást képviseli a **minimális, ergonomikus** globális állapot felé, beépített szelektív előfizetésekkel (a Context újrarenderelési problémájának megoldása). Tudni, hogy léteznek — és hogy a Zustand egy apró single-store modellt kínál, míg a Jotai composable atomokat — lehetővé teszi egy könnyű eszköz választását, amely megfelel a legtöbb alkalmazás globális állapot szükségletének, a nehezebb Redux Toolkit-et pedig valóban nagy, összetett alkalmazásokra tartva. A Context-tel szemben a megosztott kulcselőny a granularitású előfizetések, amelyek megakadályozzák az túlzott renderelést.