React Academy · Lezione

Persistenza dello stato con il middleware persist

Sincronizzi lo stato Zustand con localStorage o sessionStorage utilizzando il middleware persist.

Persistenza dello stato con il middleware persist è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuti

In questa lezione utilizzerà il middleware persist di Zustand per sincronizzare automaticamente lo stato dello store con localStorage, così da conservarlo dopo il ricaricamento della pagina.

Perché rendere persistente lo stato?

Senza persistenza, l'intero stato dello store viene reimpostato quando l'utente aggiorna la pagina. Rendere persistenti in localStorage elementi come quelli del carrello, preferenze dell'utente o lo stato dell'interfaccia, ad esempio i pannelli aperti, offre un'esperienza uniforme tra le sessioni.

Il middleware persist

Avvolga la chiamata create() con persist(). Fornisca una chiave di archiviazione univoca. Zustand leggerà automaticamente i dati da localStorage al montaggio e li scriverà a ogni modifica dello stato.

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
  )
);

Persistenza parziale con partialize

Utilizzi `partialize` per rendere persistenti solo determinate slice dello store. In questo modo esclude da localStorage i dati transitori, come gli indicatori di caricamento.

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
  }
)

Utilizzo di sessionStorage

Per rendere i dati persistenti solo durante la sessione del browser, eliminandoli alla chiusura della scheda, passi `createJSONStorage(() => sessionStorage)` come opzione di archiviazione.

import { createJSONStorage } from 'zustand/middleware';

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

Versionamento e migrazione

Quando cambia la struttura dello store, ad esempio con nuovi campi o chiavi rinominate, imposti un numero `version` e fornisca una funzione `migrate` per aggiornare i vecchi dati persistenti.

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

Idratazione e SSR

Sul server, in Next.js, localStorage non esiste. Il middleware persist di Zustand gestisce la situazione correttamente: salta l'idratazione sul server e reidrata lo store sul client dopo il montaggio.

Callback onRehydrateStorage

Utilizzi `onRehydrateStorage` per eseguire del codice quando lo store viene ripristinato dall'archiviazione. È utile per attivare una chiamata API dopo il ripristino di un token.

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

Cancellazione dello stato persistente

Chiami `useMyStore.persist.clearStorage()` per rimuovere i dati persistenti da localStorage, ad esempio durante il flusso di disconnessione.

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

Limiti delle dimensioni dell'archiviazione

localStorage ha un limite di 5–10 MB per origine. Eviti di rendere persistenti grandi quantità di dati, come cataloghi completi di prodotti. Salvi solo identificatori o piccoli oggetti di configurazione.

Verifica rapida

Quale opzione del middleware persist consente di escludere determinati campi dello stato dal salvataggio in localStorage?

Riepilogo

Avvolga lo store Zustand con persist() e fornisca una chiave name. Utilizzi partialize per salvare solo le slice pertinenti. Esegua il versionamento e la migrazione quando cambia la struttura dello store. Utilizzi clearStorage() durante la disconnessione.

Prossima lezione

Prossima lezione: **Redux DevTools e test degli store Zustand** — collegherà lo store a Redux DevTools e scriverà test di unità per le azioni Zustand.

Domande Frequenti

La lezione «Persistenza dello stato con il middleware persist» è gratuita?

Sì — il testo completo di «Persistenza dello stato con il middleware persist» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Persistenza dello stato con il middleware persist»?

Sincronizzi lo stato Zustand con localStorage o sessionStorage utilizzando il middleware persist. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Persistenza dello stato con il middleware persist»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Creazione del primo store Zustand
Selector e prevenzione dei re-render non necessari
Persistenza dello stato con il middleware persist
DevTools di Zustand e test degli store

← Torna a React Academy