React Academy · Leçon

Créer votre premier store Zustand

Définissez un store avec create(), ajoutez des parties d’état et des actions, puis utilisez-le avec useStore.

Créer votre premier store Zustand est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 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 React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Bienvenue

Dans cette leçon, vous créerez votre premier store Zustand à l'aide de la fonction de création, définirez des tranches d'état et des actions, puis utiliserez le store dans des composants React.

Qu'est-ce que Zustand ?

Zustand est une bibliothèque minimale et peu prescriptive de gestion de l'état. Un store est un simple objet JavaScript contenant un état et des fonctions. Les composants s'y abonnent au moyen d'un crochet. Aucun fournisseur, aucun réducteur et aucun code répétitif.

Installation

Installez Zustand. Il n'a aucune dépendance homologue.

npm install zustand

Création d'un store

Appelez la fonction de création avec une fonction qui renvoie l'état initial et les actions. Cette fonction reçoit un assistant `set` pour mettre à jour l'état.

import { create } from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

Utilisation du store dans un composant

Appelez le crochet du store dans n'importe quel composant pour accéder à l'état et aux actions. Aucun fournisseur englobant n'est nécessaire.

function Counter() {
  const count = useCounterStore(state => state.count);
  const increment = useCounterStore(state => state.increment);
  return (
    <>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
    </>
  );
}

Syntaxe des sélecteurs

Transmettez une fonction sélecteur au crochet du store pour ne vous abonner qu'à la tranche dont vous avez besoin. Le composant n'est réaffiché que lorsque la valeur sélectionnée change.

const count = useCounterStore(s => s.count);
const reset = useCounterStore(s => s.reset);
// Only re-renders when count changes, not the whole store

Mise à jour de l'état

La fonction `set` fusionne superficiellement les nouvelles valeurs avec celles du store. Vous pouvez lui transmettre un objet ou une fonction qui reçoit l'état actuel et renvoie des mises à jour partielles.

set({ count: 0 }) // direct set
set(state => ({ count: state.count + 1 })) // functional update

Actions asynchrones

Les actions peuvent être asynchrones. Appelez la fonction de mise à jour après avoir attendu les données. Aucun intergiciel n'est nécessaire : écrivez simplement des fonctions asynchrones ordinaires.

const useUserStore = create((set) => ({
  user: null,
  fetchUser: async (id) => {
    const data = await fetch('/api/user/' + id).then(r => r.json());
    set({ user: data });
  },
}));

Mises à jour d'un état imbriqué

Pour les objets imbriqués, recopiez manuellement le niveau extérieur ou utilisez l'intergiciel immer pour effectuer des mutations en profondeur. Par défaut, la fonction de mise à jour ne fusionne que les clés du premier niveau.

set(state => ({
  user: { ...state.user, name: 'Alice' }
}));

Lecture du store en dehors de React

Accédez à l'état du store en dehors d'un composant avec getState() et abonnez-vous aux changements avec subscribe(). Cela est utile pour les tests et le code qui n'utilise pas React.

const count = useCounterStore.getState().count;
useCounterStore.subscribe(state => console.log(state.count));

Vérification rapide

Dans un store Zustand, que fait la fonction de mise à jour ?

Récapitulatif

Créez un store Zustand avec une fonction recevant `set` et renvoyant l'état et les actions. Utilisez la syntaxe des sélecteurs dans les composants pour vous abonner à des tranches précises. Les actions appellent la fonction de mise à jour pour modifier l'état. Le fonctionnement asynchrone et l'utilisation en dehors de React sont également possibles avec getState().

À suivre

Leçon suivante : **Sélecteurs et prévention des réaffichages inutiles** — vous extrairez des tranches d'état précises afin que les composants ne soient réaffichés que lorsque cela est nécessaire.

Questions Fréquemment Posées

La leçon « Créer votre premier store Zustand » est-elle gratuite ?

Oui — le texte complet de « Créer votre premier store Zustand » 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 React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Créer votre premier store Zustand » ?

Définissez un store avec create(), ajoutez des parties d’état et des actions, puis utilisez-le avec useStore. Tu pratiques React 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 React Academy ?

Aucune expérience préalable n'est requise. React 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 1 sur 4.

Combien de temps prend la leçon « Créer votre premier store Zustand » ?

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 React Academy ?

Oui. Chaque leçon React 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

Créer votre premier store Zustand
Sélecteurs et prévention des nouveaux rendus inutiles
Persister l’état avec le middleware Persist
DevTools de Zustand et tests des stores

← Retour à React Academy