Kako se lagane trgovine poput Zustand i Jotai razlikuju od Redux?

Question

Accepted Answer

**Zustand** i **Jotai** su minimalne biblioteke stanja koje postižu globalno stanje s puno manje boilerplate-a nego Redux, i s ugrađenim **selektivnim pretplatama** kako bi se izbjegla nepotrebna ponovno iscrtavanja. Primjenjuju različite mentalne modele: Zustand je jednu prodavnicu; Jotai je atomsku. ## Zustand — jednostavna, hook-bazirana 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 ; } ``` Nema pružatelja, nema akcija, nema reduktora, nema slanja — pozivas setter funkcije direktno. Selektor (`s => s.count`) znači da se komponenta ponovno iscrta *samo* kada se taj dio promijeni. ## 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 od malih **atoma** koje kombiniraš; komponente se pretplaćuju na pojedine atome i ponovno se iscrnu samo kada se ti specifični atomi promijene. ## Usporedba s 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 odabrati što ```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 ``` ## Zašto je to važno Zustand i Jotai predstavljaju moderni trend udaljavanja od Redux boilerplate-a prema **minimalnom, ergonomskom** globalnom stanju s ugrađenim selektivnim pretplatama (rješavanje problema ponovno iscrtavanja Context-a). Znanje da postoje — i da Zustand nudi mali single-store model dok Jotai nudi composable atome — omogućuje vam da odaberete laganu alat koja odgovara potrebama globalnog stanja većine aplikacija, čuvajući teži Redux Toolkit za zaista velike, kompleksne aplikacije. Klučna zajednika prednost u odnosu na Context su granularne pretplate koje sprječavaju preslabo iscrtavanje.