Zustand pour un état React léger
Créez un store Zustand avec create(), lisez l’état avec le hook, mettez-le à jour avec des actions et profitez d’une API minimale sans code superflu.
Zustand pour un état React léger est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que Zustand ?
Zustand est une bibliothèque minimale et rapide de gestion d'état pour React. Toute son API est très réduite : créez un store, puis utilisez une fonction pour le lire et le mettre à jour. Aucun réducteur, aucune action ni code répétitif.
Créer un store
create() définit le store avec l'état et les actions sous la forme d'un objet simple. La valeur retournée est une fonction de lecture.
import { create } from 'zustand';
interface CounterStore {
count: number;
increment: () => void;
decrement: () => void;
reset: () => void;
}
export const useCounterStore = create<CounterStore>((set) => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 })),
decrement: () => set(state => ({ count: state.count - 1 })),
reset: () => set({ count: 0 }),
}));Lire l'état du store
Appelez la fonction avec une fonction de sélection pour vous abonner à des portions précises de l'état. Le composant ne relance son rendu que lorsque la portion sélectionnée change.
function Counter() {
const count = useCounterStore(state => state.count);
return <p>Count: {count}</p>;
}Lire les actions
Sélectionnez les actions de la même manière. Les actions ne changent pas : leur sélection ne provoque donc pas de nouveaux rendus inutiles.
function Controls() {
const { increment, decrement } = useCounterStore(
state => ({ increment: state.increment, decrement: state.decrement })
);
return (
<div>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
}Mettre à jour l'état avec set()
La fonction set() fusionne les mises à jour de manière superficielle, comme setState dans les composants React basés sur des classes. Transmettez-lui une fonction pour les mises à jour qui dépendent de l'état précédent.
// Merge:
set({ loading: true });
// Function for dependent updates:
set(state => ({ count: state.count + 1 }));
// Replace entirely (replace: true):
set({ count: 0, loading: false }, true);Actions asynchrones
Les actions de Zustand peuvent être asynchrones : appelez simplement set() après avoir attendu la fin de l'opération asynchrone.
export const useUsersStore = create<UsersStore>((set) => ({
users: [],
loading: false,
fetchUsers: async () => {
set({ loading: true });
const users = await fetch('/api/users').then(r => r.json());
set({ users, loading: false });
}
}));Slices — Composer de grands stores
Divisez un grand store en slices (objets séparés), puis combinez-les. Le modèle de Zustand n'impose pas cette abstraction, mais elle constitue une manière claire d'organiser les grands stores.
Intergiciel : persist
L'intergiciel persist enregistre l'état de Zustand dans localStorage et le restaure au chargement, avec une configuration minimale.
import { persist } from 'zustand/middleware';
export const useSettingsStore = create<Settings>(
persist(
(set) => ({
theme: 'light',
setTheme: (theme) => set({ theme })
}),
{ name: 'app-settings' } // localStorage key
)
);Intergiciel : devtools
Ajoutez la prise en charge de Redux DevTools à Zustand avec l'intergiciel devtools. Vous bénéficiez d'une journalisation complète des actions et d'un voyage dans le temps.
Zustand et Redux Toolkit
Zustand : minimal, sans code répétitif, rapide à configurer et idéal pour les petites et moyennes apps. RTK : structuré, évolutif, avec les meilleurs outils de développement et mieux adapté aux grandes équipes. Les deux sont de bons choix : la simplicité de Zustand l'emporte pour la plupart des apps.
Sélecteurs et performances
Sélectionnez toujours la plus petite portion d'état dont votre composant a besoin. Sélectionner l'objet d'état entier provoque un nouveau rendu à chaque modification du store. Utilisez shallow de zustand/shallow pour les sélections portant sur plusieurs propriétés.
import { shallow } from 'zustand/shallow';
const { theme, font } = useSettingsStore(
state => ({ theme: state.theme, font: state.font }),
shallow // compare each property shallowly
);Vérification rapide
Comment créer un store Zustand utilisable par toute une app React ?
Récapitulatif : Zustand
create() définit l'état et les actions. La valeur retournée est une fonction de lecture. Sélectionnez des portions d'état pour éviter les nouveaux rendus inutiles. set() fusionne les mises à jour de l'état. Les actions asynchrones appellent set() après await. L'intergiciel persist permet d'utiliser localStorage. devtools permet l'intégration avec Redux DevTools. Aucun Provider n'est nécessaire.
Questions Fréquemment Posées
La leçon « Zustand pour un état React léger » est-elle gratuite ?
Oui — le texte complet de « Zustand pour un état React léger » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Zustand pour un état React léger » ?
Créez un store Zustand avec create(), lisez l’état avec le hook, mettez-le à jour avec des actions et profitez d’une API minimale sans code superflu. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Zustand pour un état React léger » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Redux Toolkit : createSlice et configureStore
- Zustand pour un état React léger
- Pinia pour Vue : defineStore et storeToRefs
- Quand utiliser un état global ou local