Miten kevyet stores kuten Zustand ja Jotai eroavat Reduxista?

Question

Accepted Answer

**Zustand** ja **Jotai** ovat minimaaliset state-kirjastot, jotka saavuttavat globaalin staten paljon vähemmällä boilerplatella kuin Redux, ja sisäänrakennetuilla **valikoivilla tilauksilla** välttääkseen turhia uudelleenpiirtoja. Ne käyttävät erilaisia mentaalimalleja: Zustand on yksittäinen store; Jotai on atomaarinen. ## Zustand — yksinkertainen, hook-pohjainen store ```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 ; } ``` Ei provideria, ei actionseja, ei reducerseja, ei dispatchea — kutsut setter-funktioita suoraan. Selektori (`s => s.count`) tarkoittaa, että komponentti uudelleenpiirtyy *vain* kun kyseinen slice muuttuu. ## Jotai — atomaarinen state ```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 rakentaa staten pienistä **atomeista**, joita yhdistelet; komponentit tilaavat yksittäisiä atomeja ja uudelleenpiirtyvät vain kun nämä tietyt atomit muuttuvat. ## Vertailu Reduxiin ```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 ``` ## Milloin valita mitä ```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 ``` ## Miksi se on tärkeää Zustand ja Jotai edustavat modernia trendiä poispäin Reduxin boilerplatesta kohti **minimaalia, ergonomista** globaalia stateta sisäänrakennetuilla valikoivilla tilauksilla (ratkaisee Contextin uudelleenpiirrän ongelman). Tieto, että ne olemassa — ja että Zustand tarjoaa pienen single-store-mallin kun Jotai tarjoaa yhdisteltäviä atomeja — antaa sinulle mahdollisuuden valita kevyt työkalu, joka sopii useimpien sovellusten globaalin state-tarpeiden mukaan, varaten raskaamman Redux Toolkit todella suurille, monimutkaisille sovelluksille. Pääasiallinen yhteinen etu Contextiin verrattuna ovat rakeisemmat tilaukset, jotka estävät liiallisen uudelleenpiirron.