SuperAPI AI 工具集

zustand-state-management

前端与建站

查看项目

更新于 10-15 21:42

技能介绍

用途:为 React 应用中的 Zustand v5 状态管理提供一套约定,适用于跨组件共享的客户端 UI 状态(面板、地图工具、向导步骤)、不在 URL 中的临时客户端偏好、小型同步客户端状态。服务端数据应交给 TanStack Query,可分享/可收藏状态交给 nuqs,认证会话交给应用认证方案;仅当需要客户端全局状态且未被覆盖时才新增 store。

主要能力与约定:一个 store 文件对应一个关注点,文件名为 {domain}-store.ts(kebab-case,-store 后缀),与功能同目录;状态类型用 {Domain}Store,内部 create Hook 命名为 use{Domain}Store 且不导出;对外只导出 use{Slice} 状态 Hook 与 use{Domain}Actions 动作 Hook。TypeScript 中始终使用 create<T>()()(双括号)。动作放在 actions 命名空间,其引用稳定,可安全解构;动作按事件命名(如 addFilter、closePanel),业务逻辑留在 store 内。优先使用返回原始值的原子选择器;需要同时取多个值时用 useShallow(从 zustand/shallow 导入),但优先原子 Hook。提倡多个小型 store,在边缘用自定义 Hook 组合;除非有充分理由,避免 slices 模式。可与 TanStack Query 组合:筛选条件放 Zustand,服务端列表放 Query;URL 状态由 nuqs 管理,不在 Zustand 中重复。可选做幂等更新,输入频繁时无实质变化则返回原状态。持久化时每个 store 使用唯一 persist 名称。

限制与注意:不要导出 create 产生的原始 use*Store;不要无选择器调用 useStore()(会订阅整个 store);不要用未加 useShallow 的对象/数组选择器;不要用 Zustand 存服务端获取的数据;不要在 set 内原地修改状态;不要在 nuqs 已管理时重复 URL 状态。Next.js/SSR 配合 persist 需遵循官方 SSR 与 hydration 指南。中间件从 zustand/middleware 导入(如 persist)。完整 API、中间件、迁移与集成细节请查阅 llms.txt 与官方文档。