Kako se lahke trgovine kot Zustand in Jotai razlikujejo od Reduxu?

Question

Accepted Answer

**Zustand** in **Jotai** sta minimalni knjižnici stanja, ki dosegata globalno stanje z bistveno manj podrobnosti kot Redux, in imata vgrajene **selektivne naročnine** za izogib nepotrebnim ponovno risanjem. Sledita različnima mentalnim modeloma: Zustand je ena sama trgovina; Jotai je atomski. ## Zustand — preprosta, na kljuke osnovana trgovina ```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 ; } ``` Brez ponudnika, brez dejanj, brez zmanjševalcev, brez odpošiljanja — neposredno kličete funkcije nastavljanja. Selektor (`s => s.count`) pomeni, da se komponenta ponovno nariše *samo*, ko se ta del spremeni. ## Jotai — atomsko stanje ```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 gradi stanje iz majhnih **atomov**, ki jih sestavljate; komponente se naročijo na posamezne atome in se ponovno narišejo samo ko se ti specifični atomi spremenijo. ## Primerjava z Reduxom ```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 ``` ## Kdaj izbrati kaj ```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 ``` ## Zakaj je to pomembno Zustand in Jotai predstavljata sodoben trend stran od Reduxove podrobnosti proti **minimalnem, ergonomskemu** globalnemu stanju z vgrajenimi selektivnimi naročninami (reševanje problema ponovnega risanja Contexta). Več, da obstajata — in da Zustand ponuja majhen model enojne trgovine, medtem ko Jotai ponuja sestavljive atome — vam omogoči izbiro lahke orodja, primerne za večino aplikacij za globalno stanje, pri čemer si pridržite težji Redux Toolkit za resnično velike, kompleksne aplikacije. Glavna skupna prednost pred Contextom je zrnata naročnina, ki preprečuje pretiranem risanju.