En quoi les magasins légers comme Zustand et Jotai diffèrent-ils de Redux ?

Question

Accepted Answer

**Zustand** et **Jotai** sont des bibliothèques d'état minimalistes qui réalisent l'état global avec beaucoup moins de boilerplate que Redux, et avec des **souscriptions sélectives intégrées** pour éviter les re-rendus inutiles. Elles adoptent des modèles mentaux différents : Zustand est un magasin unique ; Jotai est atomique. ## Zustand — un magasin simple, basé sur les hooks ```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 ; } ``` Pas de provider, pas d'actions, pas de reducers, pas de dispatch — vous appelez directement les fonctions setter. Le sélecteur (`s => s.count`) signifie que le composant se re-rend *uniquement* quand cette tranche change. ## Jotai — état atomique ```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 construit l'état à partir de petits **atomes** que vous composez ; les composants s'abonnent à des atomes individuels et se re-rendent uniquement quand ces atomes spécifiques changent. ## Comparaison avec 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 ``` ## Quand choisir quoi ```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 ``` ## Pourquoi c'est important Zustand et Jotai représentent la tendance moderne à l'éloignement du boilerplate de Redux vers un état global **minimal et ergonomique** avec des souscriptions sélectives intégrées (résolvant le problème de re-rendu de Context). Savoir qu'ils existent — et que Zustand offre un tiny modèle single-store tandis que Jotai offre des atomes composables — vous permet de choisir un outil léger adapté aux besoins d'état global de la plupart des applications, en réservant Redux Toolkit plus lourd pour les applications véritablement grandes et complexes. L'avantage clé partagé par rapport à Context est les souscriptions granulaires qui empêchent le sur-rendu.