Estructura del Store

Nuestro proyecto implementa Zustand utilizando un enfoque modular basado en "slices". Cada slice es responsable de una parte específica del estado global.

Store Principal

El store principal se define en src/stores/app-store.js y combina todos los slices.

import { create } from "zustand";
import { devtools, persist } from "zustand/middleware";
import { createCartSlice } from "src/stores/slices/cart-slice";
import { createSettingsSlice } from "src/stores/slices/settings-slice";
import { createUserSlice } from "src/stores/slices/user-slice";
import { createPageSlice } from "src/stores/slices/page-slice";
import { createQuoteSlice } from "src/stores/slices/quote-slice";

export const useAppStore = create(
    middleware((...args) => ({
        ...createSettingsSlice(...args),
        ...createUserSlice(...args),
        ...createCartSlice(...args),
        ...createPageSlice(...args),
        ...createQuoteSlice(...args),
    }))
)

Middleware Personalizado

Utilizamos una configuración personalizada de middleware que combina devtools y persist:

const middleware = (f) => devtools(
    persist(f,
        {
            name: 'gaia-headless-storage',
            merge: (persistedState, currentState) => merge(currentState, persistedState),
            partialize: (state) =>
                Object.fromEntries(
                    Object.entries(state).filter(([key]) => ![
                        'currentProduct',
                        'currentCategory',
                        // ... más claves excluidas
                    ].includes(key))
                ),
            onRehydrateStorage: (state) => {
                return async (state, error) => {
                    // Lógica de rehidratación
                }
            },
        }
    ), { name: 'headless-appstore', enabled: IS_DEV_ENV })

Características del middleware:

• Nombre del storage: gaia-headless-storage
• Estrategia de fusión: Utiliza lodash.merge para combinar el estado persistido y el actual
• Partialización: Excluye ciertas claves de la persistencia
• Rehidratación: Implementa lógica personalizada al rehidratar el estado

Cómo está organizado el código

• app-store.js: Definición principal del store
• slices/: Directorio que contiene cada módulo (slice) del store
  • cart-slice.js
  • page-slice.js
  • settings-slice.js
  • user-slice.js
  • quote-slice.ts