Middlewares

Los middlewares son funciones que envuelven las acciones del store de Zustand, permitiendo añadir funcionalidades adicionales.

Middlewares utilizados

En nuestro proyecto usamos principalmente:

devtools

import { devtools } from 'zustand/middleware';

Este middleware conecta nuestro store con las Redux DevTools, facilitando la depuración del estado. Solo está activo en entorno de desarrollo.

Configuración:

devtools(store, {
    name: 'headless-appstore',
    enabled: IS_DEV_ENV
})

persist

import { persist } from 'zustand/middleware';

Este middleware permite persistir el estado del store en localStorage o sessionStorage, manteniendo los datos entre recargas de página.

Configuración:

persist(store, {
    name: 'gaia-headless-storage',
    merge: (persistedState, currentState) => merge(currentState, persistedState),
    partialize: (state) => Object.fromEntries(
        Object.entries(state).filter(([key]) => ![
            'currentProduct',
            'currentCategory',
            // otras claves excluidas
        ].includes(key))
    ),
    onRehydrateStorage: (state) => {
        return async (state, error) => {
            // Lógica de rehidratación
        }
    }
})

Middleware personalizado

En nuestro proyecto, hemos creado un middleware personalizado que combina devtools y persist:

const middleware = (f) => devtools(
    persist(f, {
        // Configuración de persist
    }),
    {
        // Configuración de devtools
    }
)

Aspectos importantes:

• Fusión del estado: Usamos lodash.merge para combinar el estado persistido y el actual
• Partialización: Excluimos ciertas partes del estado de la persistencia
• Rehidratación: Implementamos lógica personalizada al rehidratar el estado
  • Verificamos y actualizamos la sesión del usuario
  • Cargamos datos del carrito
  • Actualizamos configuraciones