Back to Details

store-best-practice

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Store 最佳实践

Store Best Practices

提供创建和管理状态管理store的最佳实践指导和模板。包含slice模式、store组合、类型安全、provider设置等示例和最佳实践。
Provides best practice guidance and templates for creating and managing state management stores. Includes examples and best practices for slice patterns, store composition, type safety, provider setup, etc.

工作原理

How It Works

  1. 分析应用状态需求，确定需要管理的状态切片
  2. 严格参照 best-practice-examples/ 中的代码结构和模式
  3. 为每个状态切片创建独立的 slice 文件
  4. 创建主 store 文件组合所有 slices
  5. 实现 provider 组件提供 store 上下文
  6. 创建桶导出以实现干净的导入
  7. 在应用程序中使用生成的 store
  1. Analyze application state requirements and determine the state slices to be managed
  2. Strictly follow the code structure and patterns in [best-practice-examples/]
  3. Create independent slice files for each state slice
  4. Create a main store file to combine all slices
  5. Implement a provider component to provide store context
  6. Create barrel exports for clean imports
  7. Use the generated store in the application

能力边界

Scope of Capabilities

  1. 职责边界：仅负责状态的存储、同步与修改，复杂业务逻辑（数据校验、格式转换、业务规则判断）需抽离为独立工具函数
  2. 使用边界：仅用于「跨组件/跨模块共享状态」，组件私有状态优先使用
    useState
    /
    useReducer
    ，禁止过度使用store
  3. 数据边界：不存储临时/一次性数据（如单次请求的临时参数），仅存储需持久化或多次复用的状态
  1. Responsibility Boundary: Only responsible for state storage, synchronization, and modification. Complex business logic (data validation, format conversion, business rule judgment) must be extracted into independent utility functions
  2. Usage Boundary: Only used for "state sharing across components/modules". For component-private state, prioritize using 
    useState
    /
    useReducer
    ; overuse of stores is prohibited
  3. Data Boundary: Do not store temporary/one-time data (such as temporary parameters for a single request), only store state that needs to be persisted or reused multiple times

使用方法

Usage Instructions

此技能提供文档和示例。按照参考指南中的步骤操作：
  • Store 最佳实践指南 - Store 设计和实现的详细规则
  • 最佳实践示例 - 必须严格参照的 Zustand store 示例
重要： 实现时必须严格遵循 best-practice-examples 中的代码结构、命名约定和模式。任何修改都可能破坏类型安全和可维护性。
This skill provides documentation and examples. Follow the steps in the reference guides:
  • Store Best Practice Guide - Detailed rules for store design and implementation
  • Best Practice Examples - Must strictly follow these Zustand store examples
Important: When implementing, you must strictly follow the code structure, naming conventions, and patterns in best-practice-examples. Any modifications may break type safety and maintainability.

输出

Output

技能将生成：
  • 独立的 slice 文件（每个状态切片一个）
  • 主 store 文件（组合所有 slices）
  • Provider 组件（提供 store 上下文）
  • 桶导出文件（index.ts）
注意： 调用完毕技能后，强制查看 检查清单，并确保返回的内容完全匹配清单中的所有项目。
The skill will generate:
  • Independent slice files (one for each state slice)
  • Main store file (combines all slices)
  • Provider component (provides store context)
  • Barrel export file (index.ts)
Note: After invoking the skill, you must review the Checklist and ensure that the returned content fully matches all items in the checklist.

故障排除

Troubleshooting

  • 状态管理库未安装：在项目中运行 
    pnpm install zustand
  • 类型错误：检查 slice 中的状态和动作类型定义
  • Provider 未正确设置：确保在应用根组件中包装 Provider
  • 状态不更新：检查 slice 中的动作是否正确修改状态
  • 偏离最佳实践：如果遇到问题，首先确认代码结构是否严格遵循 best-practice-examples 中的模式
  • State management library not installed: Run 
    pnpm install zustand
    in the project
  • Type errors: Check the state and action type definitions in the slice
  • Provider not set up correctly: Ensure the Provider is wrapped around the root component of the application
  • State not updating: Check if the actions in the slice correctly modify the state
  • Deviation from best practices: If you encounter issues, first confirm whether the code structure strictly follows the patterns in best-practice-examples