ZustandやJotaiなどの軽量ストアはReduxとどのように異なりますか？

Question

Accepted Answer

**Zustand**と**Jotai**はミニマルな状態管理ライブラリで、Reduxよりもはるかに少ないボイラープレートでグローバル状態を実現し、不要な再レンダリングを防ぐための組み込みの**選択的サブスクリプション**があります。異なるメンタルモデルを採用しています：Zustandは単一ストア、Jotaiはアトミックです。 ## Zustand — シンプルで hook ベースのストア ```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 ; } ``` プロバイダーもアクションもリデューサーも dispatch もなく、セッター関数を直接呼び出します。セレクター（`s => s.count`）は、そのスライスが変更された時*だけ*コンポーネントが再レンダリングされることを意味します。 ## Jotai — アトミック状態 ```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は小さな**アトム**から状態を構築します。これらを組み合わせることができます。コンポーネントは個別のアトムにサブスクライブし、それらの特定のアトムが変更された時だけ再レンダリングされます。 ## 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 ``` ## どれを選ぶべきか ```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 ``` ## なぜ重要なのか ZustandとJotaiはReduxのボイラープレートから離れ、組み込みの選択的サブスクリプション（Contextの再レンダリング問題を解決）を備えた**ミニマルで人間工学的な**グローバル状態への最新トレンドを象徴しています。これらが存在すること、そしてZustandが小さい単一ストアモデルを提供し、Jotaiが組み合わせ可能なアトムを提供することを知ることで、ほとんどのアプリのグローバル状態ニーズに適した軽量ツールを選択し、本当に大規模で複雑なアプリケーションのためにより重いRedux Toolkitを予約することができます。 Contextに対する共有される主な利点は、過度なレンダリングを防ぐ細粒度のサブスクリプションです。