Utilizzare Zustand con Local Storage: Guida Pratica

La gestione dello stato è una parte fondamentale nello sviluppo di applicazioni web moderne, e Zustand, una libreria leggera per la gestione dello stato in React, è sempre più apprezzata per la sua semplicità e flessibilità. Spesso, però, c’è bisogno di rendere persistente lo stato dell’applicazione tra sessioni diverse: è qui che entra in gioco il localStorage.

Integrare Zustand con il localStorage è un modo efficace per salvare e recuperare lo stato dell’applicazione. Ecco una guida su come farlo!

Perché Scegliere Zustand?

Zustand si distingue per la sua API minimalista e la facilità d’uso. Tra le sue caratteristiche principali troviamo:

• Zero boilerplate: puoi definire il tuo store in poche righe di codice.
• Reattività: l’interfaccia utente si aggiorna automaticamente quando lo stato cambia.
• Estendibilità: supporta middleware e logiche personalizzate senza complicazioni.

Perché Usare il localStorage?

Il localStorage consente di mantenere i dati anche dopo che l’utente ha chiuso il browser, rendendolo ideale per salvare preferenze utente, temi o informazioni del carrello. Con Zustand, possiamo automatizzare questo processo per salvare e ripristinare lo stato.

Come Configurare Zustand con localStorage

Ecco i passi per creare uno store Zustand persistente utilizzando il localStorage:

1. Installare Zustand:

   npm install zustand

2. Creare uno Store Persistente: Zustand offre il middleware persist per gestire automaticamente la persistenza. Ecco un esempio:

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

   const useStore = create(
     persist(
       (set) => ({
         count: 0,
         increment: () => set((state) => ({ count: state.count + 1 })),
         reset: () => set({ count: 0 }),
       }),
       {
         name: 'mio-store', // Nome unico per il localStorage
         partialize: (state) => ({ count: state.count }), // Salva solo parti specifiche dello stato
       }
     )
   );

   export default useStore;

3. Usare lo Store nei Componenti: Una volta creato lo store, puoi utilizzarlo nei tuoi componenti React:

   import React from 'react';
   import useStore from './store';

   function Contatore() {
     const { count, increment, reset } = useStore();

     return (
       <div>
         <h1>Conteggio: {count}</h1>
         <button onClick={increment}>Incrementa</button>
         <button onClick={reset}>Resetta</button>
       </div>
     );
   }

   export default Contatore;

4. Persistenza Automatica con localStorage: Grazie al middleware persist, Zustand si occupa di salvare e recuperare automaticamente lo stato dal localStorage. Il parametro name specifica la chiave unica utilizzata nel localStorage.

Cosa Considerare

• Sicurezza: Non salvare dati sensibili (es. token di autenticazione) nel localStorage, perché possono essere accessibili tramite script malevoli.
• Limiti di memoria: Il localStorage ha un limite di 5MB per dominio.
• Performance: Persistere stati molto grandi o aggiornati frequentemente può influire sulle prestazioni.

Consigli Avanzati

1. Serializzazione Personalizzata:
   Se il tuo stato include dati non serializzabili (es. funzioni, date), puoi usare le opzioni serialize e deserialize:

   persist(
     (set) => ({ ... }),
     {
       name: 'app-store',
       serialize: (state) => JSON.stringify(state),
       deserialize: (str) => JSON.parse(str),
     }
   );

2. Cancellare lo Stato Salvato:
   Per resettare lo stato persistente, puoi usare:

   const clearStorage = () => localStorage.removeItem('mio-store');

3. Sincronizzazione Multi-Tab:
   Per sincronizzare lo stato tra schede del browser, puoi ascoltare l’evento storage:

   window.addEventListener('storage', () => {
     useStore.persist.rehydrate();
   });