React Academy · Lección

Persistir el estado con el middleware persist

Sincronice el estado de Zustand con localStorage o sessionStorage mediante el middleware persist.

Persistir el estado con el middleware persist es una lección gratuita de React Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Introducción

En esta lección usará el middleware persist de Zustand para sincronizar automáticamente el estado del store con localStorage, de modo que sobreviva a las recargas de la página.

¿Por qué persistir el estado?

Sin persistencia, todo el estado del store se restablece cuando el usuario actualiza la página. Persistir en localStorage elementos del carrito, preferencias del usuario o el estado de la interfaz (como paneles abiertos) ofrece una experiencia fluida entre sesiones.

El middleware persist

Envuelva la llamada a create() con persist(). Proporcione una clave de almacenamiento única. Zustand leerá automáticamente de localStorage al montarse y escribirá cada vez que cambie el estado.

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

Persistencia parcial con partialize

Use `partialize` para persistir únicamente fragmentos específicos del store. Así excluirá de localStorage los datos transitorios, como los indicadores de carga.

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

Usar sessionStorage

Para persistir los datos solo durante la sesión del navegador (se eliminan al cerrar la pestaña), pase `createJSONStorage(() => sessionStorage)` como opción de almacenamiento.

import { createJSONStorage } from 'zustand/middleware';

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

Versionado y migración

Cuando cambie la estructura del store (por ejemplo, al añadir campos o cambiar el nombre de claves), establezca un número de `version` y proporcione una función `migrate` para actualizar los datos persistidos antiguos.

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

Hidratación y SSR

En el servidor (Next.js), localStorage no existe. El middleware persist de Zustand gestiona esta situación correctamente: omite la hidratación en el servidor y vuelve a hidratar el estado en el cliente después del montaje.

Callback onRehydrateStorage

Use `onRehydrateStorage` para ejecutar código cuando el store se restaure desde el almacenamiento. Resulta útil para activar una llamada a una API después de restaurar un token.

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

Borrar el estado persistido

Llame a `useMyStore.persist.clearStorage()` para eliminar de localStorage los datos persistidos; resulta útil en los flujos de cierre de sesión.

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

Límites de tamaño del almacenamiento

localStorage tiene un límite de 5–10 MB por origen. Evite persistir grandes conjuntos de datos, como catálogos completos de productos. Persista únicamente identificadores u objetos de configuración pequeños.

Comprobación rápida

¿Qué opción del middleware persist permite excluir determinados campos del estado para que no se guarden en localStorage?

Repaso

Envuelva su store de Zustand con persist() y proporcione una clave name. Use partialize para almacenar solo los fragmentos relevantes. Cree una versión y migre los datos cuando cambie la estructura del store. Use clearStorage() al cerrar la sesión.

A continuación

Siguiente lección: **DevTools de Zustand y pruebas de stores**: se conectará a Redux DevTools y escribirá pruebas unitarias para las acciones de Zustand.

Preguntas frecuentes

¿La lección «Persistir el estado con el middleware persist» es gratis?

Sí — el texto completo de «Persistir el estado con el middleware persist» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Persistir el estado con el middleware persist»?

Sincronice el estado de Zustand con localStorage o sessionStorage mediante el middleware persist. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Persistir el estado con el middleware persist»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Crear su primer store de Zustand
Selectores y prevención de renderizados innecesarios
Persistir el estado con el middleware persist
DevTools de Zustand y pruebas de stores

← Volver a React Academy