zustand

Standardize Zustand store actions into public, internal, and dispatch layers.

1|Updated May 9, 2026
One-click install
npx skills add https://github.com/duwenji/generative-ai-oss-tutorials --skill zustand-duwenji
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: zustand
Source: https://github.com/duwenji/generative-ai-oss-tutorials/tree/main/sandbox/lobe-chat/.agents/skills/zustand
Command: npx skills add https://github.com/duwenji/generative-ai-oss-tutorials --skill zustand-duwenji

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves inconsistent Zustand store updates and hard-to-maintain action logic by standardizing public/internal/dispatch action layers and reliable optimistic update flows.

Core Features & Use Cases

  • Action hierarchy conventions: clean separation of UI-facing public actions, business logic internal_* actions, and state-update internal_dispatch* reducers.
  • Optimistic update pattern: immediate UI responsiveness with a safe refresh cycle for consistency.
  • Map/array state design: standardized use of messagesMap/topicMaps for entities and loading ID arrays for in-flight state.
  • Class-based slice actions: migrate from StateCreator objects to encapsulated action classes with private fields and controlled public method exposure.
  • Safe slice composition: compose class instances using flattenActions (not spreads) to avoid breaking prototype/class-field behavior.

Quick Start

Apply the Zustand conventions when building or refactoring any store slice under src/store/** by creating a createXxxSlice that exposes public methods while keeping internal_* and internal_dispatch* responsibilities separated.

Frequently Asked Questions about zustand

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure Zustand store slices for scalable state management?▼

Structure Zustand state management by defining public, internal, and internal_dispatch action layers to separate UI-facing actions from business logic and state-update reducers. This hierarchy keeps store updates clean and maintainable as your application grows.

What is the best way to implement optimistic updates in a Zustand store?▼

Implement optimistic updates in Zustand by applying immediate UI state changes through internal_dispatch reducers, then running a safe refresh cycle to reconcile consistency. This pattern ensures responsive interfaces while preventing permanent state drift.

How do I compose Zustand slices with class-based actions without breaking prototype behavior?▼

Compose Zustand class-based action slices using the flattenActions utility instead of object spreads. Spreading breaks prototype chains and private class-field behavior, whereas flattenActions safely merges class instances while preserving controlled method exposure.

When should I use a reducer versus set for Zustand state updates?▼

Use Zustand set for simple direct state assignments, and use internal_dispatch reducers for complex state transitions involving optimistic update flows or map/array manipulation. This decision rule standardizes update logic and prevents inconsistent state mutations across slices.

How do I manage entity and loading state in Zustand chat store slices?▼

Manage Zustand entity state using standardized messagesMap and topicMaps for data storage, and use loading ID arrays for tracking in-flight requests. This map-based design supports efficient optimistic create and update flows for chat topics.

Does this Zustand state management approach work with TypeScript?▼

Yes, this Zustand state management approach works with TypeScript by using class-based action migration with private constructor-bound accessors. This provides strict typing for slice composition and controlled public method exposure.