SuperAPI AI 工具集

react-state

前端与建站

查看项目

更新于 10-15 21:49

技能介绍

用途:在 React 应用中用 Zustand v5 管理全局状态,适用于跨组件共享状态、持久化到 localStorage/sessionStorage、构建 UI 状态(弹窗、侧边栏、主题、购物车),以及替代复杂场景下的 React Context。

主要能力与约定:采用极简 create() API,基于 React 18 的 useSyncExternalStore,无需 Provider;TypeScript 优先,使用柯里化写法 create<State>()((set) => ({...})) 以获得完整类型推断;中间件可组合,顺序为 devtools -> persist -> immer;体积约 2KB gzip。

关键规则:数组/对象选择器使用 useShallow 避免多余重渲染;每个领域一个 store(auth、cart、ui、theme);服务端状态改用 TanStack Query;devtools 仅在开发环境启用;persist 使用 partialize 只持久化必要字段,绝不持久化 token。

目录组织:store 按功能模块放置,如 modules/cores/stores/(共享的 theme、ui)、modules/auth/src/stores/、modules/cart/src/stores/,类型放在 modules/[feature]/src/interfaces/。文件建议 store.ts(创建,最多 50 行)、store.interface.ts(类型,30 行)、use-store.ts(带选择器的自定义 hook,20 行)。

强制智能体工作流:任何实现前须用 TeamCreate 启动 3 个 agent——fuse-ai-pilot:explore-codebase 分析现有 store 与状态模式,fuse-ai-pilot:research-expert 通过 Context7/Exa 核对最新 Zustand v5 文档,mcp__context7__query-docs 检查中间件与 TypeScript 模式;实现后运行 fuse-ai-pilot:sniper 验证。

禁止模式:持久化认证 token(安全风险,应使用 httpOnly cookie);对象选择器不加 useShallow(重渲染过多);使用 v4 语法(类型推断失效);单一巨型 store(难维护,应拆分 slices 或独立 store)。

参考文档涵盖安装、store 模式、中间件、TypeScript、slices、自动选择器、重置状态、subscribe API、测试与 v4→v5 迁移。具体安装命令与代码示例资料未提供。