Hur skiljer sig lätta butiker som Zustand och Jotai från Redux?

Question

Accepted Answer

**Zustand** och **Jotai** är minimala tillståndsbibliotek som uppnår globalt tillstånd med mycket mindre boilerplate än Redux, och med inbyggda **selektiva prenumerationer** för att undvika onödiga omritningar. De använder olika mentalmodeller: Zustand är en enda butik; Jotai är atomisk. ## Zustand — en enkel, hook-baserad butik ```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 ; } ``` Ingen provider, inga actions, inga reducers, ingen dispatch — du anropar setter-funktioner direkt. Selektorn (`s => s.count`) betyder att komponenten omritas *endast* när det segmentet ändras. ## Jotai — atomärt tillstånd ```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 bygger tillståndet från små **atomer** som du komponerar; komponenter prenumererar på enskilda atomer och omritas bara när dessa specifika atomer ändras. ## Jämförelse med 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 ``` ## När man ska välja vad ```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 ``` ## Varför det är viktigt Zustand och Jotai representerar den moderna trenden bort från Redux:s boilerplate mot **minimal, ergonomisk** globalt tillstånd med inbyggda selektiva prenumerationer (lösning av Context:s omritningsproblem). Att veta att de finns — och att Zustand erbjuder en liten single-store-modell medan Jotai erbjuder sammansetsbara atomer — låter dig välja ett lätt verktyg som passar de flesta applikationers globala tillståndsbehov, och reservera tyngre Redux Toolkit för verkligt stora, komplexa applikationer. Den viktigaste delade fördelen gentemot Context är granulösa prenumerationer som förhindrar över-rendering.