TypeScript Academy · Leçon

Motifs de typage des magasins Zustand

Définissez des magasins Zustand typés avec des interfaces et des actions

Motifs de typage des magasins Zustand est une leçon TypeScript 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 TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.

Pourquoi typer Zustand ?

Zustand est une bibliothèque minimale de gestion de state. Grâce à une bonne intégration avec TypeScript, vous obtenez des lectures du store, des actions et des sélecteurs sûrs du point de vue des types, sans code répétitif.

import { create } from "zustand";

Store typé de base

Définissez l’interface du store et transmettez-la comme paramètre générique à create.

interface CounterStore {
  count: number;
  increment: () => void;
  decrement: () => void;
}

const useCounter = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
  decrement: () => set((s) => ({ count: s.count - 1 })),
}));

Lire le state du store

Utilisez le hook avec un sélecteur pour lire des parties précises du state. TypeScript déduit le type de retour à partir du sélecteur.

function Counter() {
  const count = useCounter((s) => s.count);       // number
  const increment = useCounter((s) => s.increment); // () => void
  return <button onClick={increment}>{count}</button>;
}

Séparer le state et les actions

Un modèle courant sépare les propriétés du state des méthodes d’action dans l’interface afin d’obtenir une organisation plus claire.

interface State { count: number; }
interface Actions { increment: () => void; reset: () => void; }
type CounterStore = State & Actions;

Actions asynchrones dans Zustand

Zustand prend nativement en charge les actions asynchrones : il suffit de rendre asynchrone la fonction d’action à l’intérieur du créateur.

interface UserStore {
  users: User[];
  fetchUsers: () => Promise<void>;
}

const useUserStore = create<UserStore>((set) => ({
  users: [],
  fetchUsers: async () => {
    const data = await api.getUsers();
    set({ users: data });
  },
}));

Typage de l’intergiciel immer

Utilisez l’intergiciel immer de Zustand pour effectuer des mises à jour dans un style mutable. Le type du store est correctement propagé.

import { immer } from "zustand/middleware/immer";

const useStore = create<CounterStore>()(
  immer((set) => ({
    count: 0,
    increment: () => set((state) => { state.count++; }),
  }))
);

Intergiciel devtools

Combinez devtools avec un typage approprié pour activer la prise en charge de Redux DevTools tout en conservant les types intacts.

import { devtools } from "zustand/middleware";

const useStore = create<CounterStore>()(
  devtools(
    (set) => ({ count: 0, increment: () => set({ count: 1 }) }),
    { name: "CounterStore" }
  )
);

Typage d’un store persistant

L’intergiciel persist sérialise le state dans localStorage. Typez-le correctement avec l’interface du state partiel.

import { persist } from "zustand/middleware";

const useStore = create<CounterStore>()(
  persist(
    (set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }),
    { name: "counter-storage" }
  )
);

Modèle des slices typées

Pour les grands stores, séparez le state en slices typées qui sont combinées dans un unique appel à create.

type UserSlice = { users: User[]; setUsers: (u: User[]) => void; };
type UiSlice = { modal: boolean; openModal: () => void; };
type AppStore = UserSlice & UiSlice;

S’abonner en dehors de React

Accédez au state du store et abonnez-vous aux changements en dehors des composants React à l’aide de l’API du store typé.

// Access current state outside React
const count = useCounter.getState().count;

// Subscribe to changes
useCounter.subscribe((state) => console.log(state.count));

Récapitulatif : typage de Zustand

Typage de Zustand : définissez une interface de store, transmettez-la à create, utilisez des sélecteurs pour lire le state de manière typée et ajoutez les intergiciels (immer, devtools, persist) avec le modèle des fonctions partiellement appliquées afin de garantir une propagation correcte des types.

Vérification rapide

Comment lire une partie précise du state de Zustand dans un composant sans provoquer de nouveaux rendus lors de changements sans rapport ?

Ce que vous avez appris

Les stores Zustand sont typés en transmettant un paramètre générique d’interface à create. Utilisez des fonctions sélecteurs pour lire le state efficacement et de manière sûre du point de vue des types. Combinez des intergiciels comme immer, devtools et persist avec le modèle des fonctions partiellement appliquées de Zustand pour obtenir une inférence correcte avec TypeScript.

Questions Fréquemment Posées

La leçon « Motifs de typage des magasins Zustand » est-elle gratuite ?

Oui — le texte complet de « Motifs de typage des magasins 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 TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Motifs de typage des magasins Zustand » ?

Définissez des magasins Zustand typés avec des interfaces et des actions Tu pratiques TypeScript 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 TypeScript Academy ?

Aucune expérience préalable n'est requise. TypeScript 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 « Motifs de typage des magasins 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 TypeScript Academy ?

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

Typer les slices et thunks de Redux Toolkit
Motifs de typage des magasins Zustand
XState : machines à états typées
État dérivé et sélecteurs avec des types

← Retour à TypeScript Academy