Zustand

This codifies LobeHub's three-layer Zustand architecture: public actions for UI calls, internal_* methods for business logic with optimistic updates, and internal_dispatch* reducers for state mutations. The real value is in the patterns: when to use reducers versus simple set calls, how to handle optimistic updates for maps like messagesMap and topicMaps, and the ongoing migration from plain StateCreator objects to class-based actions with flattenActions composition. If you're working in src/store/**, this gives you the naming conventions and structural rules the codebase actually follows, including the newer class pattern with private fields and explicit store augmentation types for cross-slice dependencies.

skills.sh installs: 1.4K
GitHub stars: 79.8K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add lobehub/lobe-chat --skill zustand --agent claude-code

Installs into .claude/skills of the current project.

Files

LobeHub Zustand State Management

State Shapes and Types

Import shared store types from @lobechat/types, not @lobechat/database.
Keep lightweight list-item types separate from full detail types; list types must not extend heavy detail types.
Key cached details by id (xxxDetailMap: Record<string, Detail>); never hold a single currentDetail object.
Read through xxxSelectors aggregates (selectors.ts), not ad-hoc lambdas repeated across components.
Before choosing list/detail shapes or type sources, read Data structures.