zustand
LobeHub Zustand store conventions. Use when editing src/store, store slices, public/internal actions, dispatch actions, flattenActions, optimistic updates, selectors, maps, or class action migration.
npx skills add lobehub/lobehub --skill zustand --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# LobeHub Zustand State Management ## Action Type Hierarchy ### 1. Public Actions Main interfaces for UI components: - Naming: Verb form (`createTopic`, `sendMessage`) - Responsibilities: Parameter validation, flow orchestration ### 2. Internal Actions (`internal_*`) Core business logic implementation: - Naming: `internal_` prefix (`internal_createTopic`) - Responsibilities: Optimistic updates, service calls, error handling - Should not be called directly by UI ### 3. Dispatch Methods (`internal_dispatch*`) State update handlers: - Naming: `internal_dispatch` + entity (`internal_dispatchTopic`) - Responsibilities: Calling reducers, updating store ## When to Use Reducer vs Simple `set` **Use Reducer Pattern:** - Managing object lists/maps (`messagesMap`, `topicMaps`) - Optimistic updates - Complex state transitions **Use Simple `set`:** - Toggling booleans - Updating simple values - Setting single state fields ## Optimistic Update Pattern ```typescript internal_createTopic: async (params) => { const tmpId = Date.now().toString(); // 1. Immediately update frontend (optimistic) get().internal_dispatchTopic( { type: 'addTopic', value: { ...params, id: tmpId } }, 'internal_createTopic'
- Action Type Hierarchy
- 1. Public Actions
- 2. Internal Actions (internal)
- 3. Dispatch Methods (internaldispatch)
- When to Use Reducer vs Simple set
- Optimistic Update Pattern
- Naming Conventions
- Detailed Guides
- Class-Based Action Implementation
- Pattern
- Composition
- Multi-Class Slices
- Store-Access Types
- Slices That Don't Currently Need set
What does the zustand skill do?
LobeHub Zustand store conventions. Use when editing src/store, store slices, public/internal actions, dispatch actions, flattenActions, optimistic updates, selectors, maps, or class action migration.
How do I install it?
Run `npx skills add lobehub/lobehub --skill zustand --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From lobehub/lobehub, a repository with 81,252 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.