Wie unterscheiden sich leichte Stores wie Zustand und Jotai von Redux?

Question

Accepted Answer

**Zustand** und **Jotai** sind minimale State-Bibliotheken, die globalen State mit deutlich weniger Boilerplate als Redux erreichen und mit built-in **selektiven Subscriptions** ausgestattet sind, um unnötige Re-Renders zu vermeiden. Sie folgen unterschiedlichen Konzepten: Zustand ist ein einzelner Store; Jotai ist atomar. ## Zustand — ein einfacher, hook-basierter 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 ; } ``` Kein Provider, keine Actions, keine Reducer, kein Dispatch — du rufst Setter-Funktionen direkt auf. Der Selector (`s => s.count`) bedeutet, dass die Komponente *nur* neu gerendert wird, wenn sich dieser Slice ändert. ## Jotai — atomarer 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 konstruiert State aus kleinen **Atomen**, die du komponierst; Komponenten abonnieren einzelne Atome und werden nur neu gerendert, wenn sich diese spezifischen Atome ändern. ## Vergleich mit 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 ``` ## Wann welche Lösung wählen ```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 ``` ## Warum es wichtig ist Zustand und Jotai verkörpern den modernen Trend weg von Reduxs Boilerplate hin zu **minimalem, ergonomischem** globalen State mit built-in selektiven Subscriptions (löst Contexts Re-Render-Problem). Wenn du weißt, dass es sie gibt — und dass Zustand ein winziges Single-Store-Modell bietet, während Jotai komponierbare Atome bietet — kannst du ein leichtes Tool wählen, das zu den Global-State-Anforderungen der meisten Apps passt, und dabei Redux Toolkit für echte große, komplexe Anwendungen sparen. Der Hauptvorteil gegenüber Context sind granulare Subscriptions, die Over-Rendering verhindern.