lobehub/store-data-structures

¿Qué hace store-data-structures?

Patrones de estructura de datos para stores Zustand de LobeHub. Útil al diseñar el estado del store, divisiones lista/detalle, mapas normalizados, reducers, messagesMap, topicsMap o al elegir fuentes de tipos compartidas.

Descripción general

Este repositorio proporciona pautas y ejemplos sobre cómo estructurar el estado de un store Zustand en aplicaciones LobeHub. El objetivo es mantener un estado predecible, eficiente y fácil de mantener, especialmente cuando se manejan grandes cantidades de datos relacionados.

Conceptos clave

Divisiones lista/detalle

Separar el estado en dos partes: una lista (array de IDs) y un mapa de detalles (objeto clave/valor con entidades). Esto permite renderizar listas rápidas y cargar detalles bajo demanda.

Mapas normalizados

Usar mapas planos (por ejemplo, {[id: string]: Entity}) en lugar de arrays anidados. Esto evita duplicación y facilita las actualizaciones.

Reducers

Implementar funciones reductoras (reducers) para manejar acciones de forma predecible, similar a Redux. Zustand permite usar hooks personalizados para esto.

messagesMap y topicsMap

Estructuras específicas para mensajes y temas (topics) del chat, optimizadas para búsqueda y actualización.

Ejemplos de código

import { create } from 'zustand';

interface Message {
  id: string;
  content: string;
  role: 'user' | 'assistant';
  createdAt: number;
}

interface Topic {
  id: string;
  title: string;
  messages: string[]; // array de IDs de mensajes
}

interface ChatStoreState {
  messagesMap: Record<string, Message>;
  topicsMap: Record<string, Topic>;
}

const useChatStore = create<ChatStoreState>(() => ({
  messagesMap: {},
  topicsMap: {},
}));

Fuentes de tipos compartidas

Definir las interfaces y tipos en un módulo separado (por ejemplo, types/store.ts) y reutilizarlos en toda la aplicación. Esto asegura consistencia y facilita la refactorización.

Recomendaciones

• Utilizar immer para actualizaciones inmutables más simples.
• Mantener los reducers pequeños y enfocados en una sola entidad.
• Usar devtools middleware para depuración.
• Documentar el esquema del estado en el tipo del store.

Referencias

• Estado de Zustand: guía de mejores prácticas
• Normalización de datos en Redux (conceptos transferibles)

Licencia

MIT