SuperAPI AI 工具集

zustand-state-management

通用与其它

查看项目

更新于 10-16 01:28

技能介绍

用途:在 React 与 TypeScript 项目中应用 Zustand 做客户端状态管理,覆盖从简单 store 到持久化、模块化与 Next.js SSR 场景。资料声明状态为生产就绪,版本 zustand@5.0.8,依赖 React 18+ 与 TypeScript 5+。

主要能力:提供三类基础模式——基础 store、TypeScript store(推荐)与持久化 store;内置 persist、devtools、immer 等中间件用法与组合方式;给出计算值、异步 action、重置 store、带参数选择器等常见模式;包含 slices 模块化组织;附带 8 个模板文件(基础、TS、持久化、slices、devtools、Next.js、计算值、异步)及中间件、TS、Next.js 水合、迁移等参考文档,另有 check-versions.sh 脚本。

使用方式:安装 npm install zustand(或 pnpm add zustand / yarn add zustand)。用 create 创建 store,TS 中必须使用 create<T>()() 双括号写法以兼容中间件类型;组件内通过选择器 useStore((state) => state.x) 取用,多个值配合 shallow;持久化用 persist 与 createJSONStorage,可配 partialize;Next.js 用 _hasHydrated 标记避免水合不匹配。模板可通过 cp ~/.claude/skills/zustand-state-management/templates/typescript-store.ts src/store/ 使用。

适用场景:React 客户端状态、跨页面持久化偏好、需要 DevTools 调试或模块化拆分的中大型 store。

限制:不可变更新,禁止直接改 state;选择器不要新建对象否则无限渲染;多个 store 持久化 key 不可重名;SSR 中不可直接访问 localStorage;服务端数据应使用 TanStack Query 而非 Zustand;不要直接导出 store 实例,应导出 hook。具体安装路径等环境信息暂未提供。