React Academy · Leçon

Persister l’état avec le middleware Persist

Synchronisez l’état Zustand avec localStorage ou sessionStorage à l’aide du middleware persist.

Persister l’état avec le middleware Persist est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 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 utiliserez le middleware de persistance de Zustand pour synchroniser automatiquement l'état du store avec localStorage afin qu'il soit conservé après le rechargement des pages.

Pourquoi conserver l'état ?

Sans persistance, tout l'état du store est réinitialisé lorsque l'utilisateur actualise la page. La conservation dans localStorage des éléments du panier, des préférences utilisateur ou de l'état de l'interface (panneaux ouverts) offre une expérience fluide d'une session à l'autre.

Le middleware de persistance

Entourez votre appel de création par le middleware de persistance. Fournissez une clé de stockage unique. Zustand lira automatiquement les données depuis localStorage au montage et les écrira à chaque changement d'état.

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useCartStore = create(
  persist(
    (set) => ({
      items: [],
      addItem: (item) => set(s => ({ items: [...s.items, item] })),
    }),
    { name: 'cart-storage' } // localStorage key
  )
);

Persistance partielle

Utilisez `partialize` pour ne conserver que certaines tranches du store. Cela exclut de localStorage les données temporaires, comme les indicateurs de chargement.

persist(
  (set) => ({ user: null, token: null, loading: false, fetch: () => {} }),
  {
    name: 'auth-storage',
    partialize: (state) => ({ user: state.user, token: state.token }),
    // loading and fetch are NOT persisted
  }
)

Utilisation de sessionStorage

Pour conserver les données uniquement pendant la session du navigateur, les données étant supprimées à la fermeture de l'onglet, transmettez `createJSONStorage(() => sessionStorage)` comme option de stockage.

import { createJSONStorage } from 'zustand/middleware';

persist(storeCreator, {
  name: 'session-data',
  storage: createJSONStorage(() => sessionStorage),
})

Versionnement et migration

Lorsque la structure de votre store change, par exemple avec de nouveaux champs ou des clés renommées, définissez un numéro de `version` et fournissez une fonction `migrate` pour mettre à niveau les anciennes données conservées.

persist(storeCreator, {
  name: 'my-store',
  version: 2,
  migrate: (persistedState, version) => {
    if (version === 1) {
      return { ...persistedState, newField: 'default' };
    }
    return persistedState;
  },
})

Hydratation et SSR

Sur le serveur (Next.js), localStorage n'existe pas. Le middleware de persistance de Zustand gère cela correctement : il ignore l'hydratation sur le serveur et réhydrate le store côté client après le montage.

Rappel onRehydrateStorage

Utilisez `onRehydrateStorage` pour exécuter du code lorsque le store est restauré depuis le stockage. Cela est utile pour déclencher un appel d'API après la restauration d'un jeton.

persist(storeCreator, {
  name: 'auth',
  onRehydrateStorage: () => (state) => {
    if (state?.token) state.fetchUser();
  },
})

Suppression de l'état conservé

Appelez `useMyStore.persist.clearStorage()` pour supprimer les données conservées dans localStorage, ce qui est utile lors de la déconnexion.

const handleLogout = () => {
  useAuthStore.persist.clearStorage();
  useAuthStore.setState({ user: null, token: null });
};

Limites de taille du stockage

localStorage est limité à 5–10 MB par origine. Évitez d'y conserver de grands ensembles de données, comme des catalogues de produits complets. Ne conservez que des identifiants ou de petits objets de configuration.

Vérification rapide

Quelle option du middleware de persistance permet d'exclure certains champs d'état de l'enregistrement dans localStorage ?

Récapitulatif

Entourez votre store Zustand du middleware de persistance et fournissez une clé de nom. Utilisez l'option de sélection partielle pour ne conserver que les tranches pertinentes. Versionnez et migrez les données lorsque la structure du store change. Utilisez clearStorage() lors de la déconnexion.

À suivre

Leçon suivante : **DevTools de Zustand et tests des stores** — vous vous connecterez à Redux DevTools et écrirez des tests unitaires pour les actions Zustand.

Questions Fréquemment Posées

La leçon « Persister l’état avec le middleware Persist » est-elle gratuite ?

Oui — le texte complet de « Persister l’état avec le middleware Persist » 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 « Persister l’état avec le middleware Persist » ?

Synchronisez l’état Zustand avec localStorage ou sessionStorage à l’aide du middleware persist. 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 3 sur 4.

Combien de temps prend la leçon « Persister l’état avec le middleware Persist » ?

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