SuperAPI AI 工具集

zustand-mutative-pattern

前端与建站

查看项目

更新于 10-16 03:38

技能介绍

用途:为 React 项目提供一套自定义 Zustand 状态管理架构规范,适用于使用 Zustand 实现状态管理的场景,包括上下文作用域 Store、mutative 更新和 actions 命名空间模式。

主要能力与规则要求:

  1. Actions 命名空间:所有状态修改函数必须集中放在 actions 对象下,禁止放在 state 根层级。
  2. 状态分组:相关 UI 状态必须嵌套,例如 sidebar: { open: boolean },而非 sidebarOpen: boolean。
  3. Mutative 更新:状态更新必须使用 zustand-mutative 的 mutative,深层更新不得用普通展开运算符。
  4. 上下文隔离:Store 必须通过 React Context 提供,以保证作用域隔离与 SSR 安全,禁止全局单例 Store。
  5. 浅比较:选择多个属性时必须用 useShallow 包裹 selector。
  6. 事件驱动副作用:Store 只负责管理状态和发出事件,副作用(Toast、对话框、网络请求)必须由 Sidecar 组件处理。

使用方式(结构要点):

  • Store 定义与工厂:使用 zustand/vanilla 的 createStore,并包在 mutative 中;工厂函数支持传入 partial 覆盖默认值与 actions。
  • Provider 与 Context:使用 createReactContext 创建上下文,Provider 支持外部传入 store 或通过 initialState 创建,并可通过 parentStore 继承父级上下文。
  • Hooks:createBoundedUseStore 生成受限 store hook;useXxxStoreContext() 返回 store 实例,useXxxStore(selector) 用于选择状态;useXxxStore 选多属性时须用 useShallow。

命名约定:useXxxStoreContext() 返回 store 实例(用于直接操作);useXxxStore(selector) 为受限 Store hook(用于选择状态)。

高级模式:完整实现示例(含事件驱动 Sidecar 模式、Store 继承、actions 覆盖与性能优化)见 references/zustand-pattern.md。

限制:本资料为架构规范与示例说明,未提供具体安装命令、依赖版本、收费方式或平台支持信息,相关事实暂未提供。