用途:为 React + TypeScript 项目提供 Zustand 状态管理方案,适用于全局状态、从 Redux 或 Context API 迁移、localStorage 持久化、slices 模式与 devtools 调试等场景。
主要能力:以 create 单一函数为核心,无需 Provider、reducer 或 action;TypeScript 类型推断友好;细粒度订阅减少多余重渲染;通过中间件支持持久化、devtools 与 immer。资料给出三种基础模式:JavaScript 基础 store、TypeScript store(推荐)、持久化 store。
使用方式:安装命令为 bun add zustand(或 npm install zustand、yarn add zustand)。TypeScript 中必须使用 create<T>()() 双括号写法以兼容中间件;用选择器函数提取状态切片;持久化使用 persist 与 createJSONStorage,并设置唯一 storage 名称。中间件顺序为 devtools(persist(...))。
限制与注意:不要直接修改 state,应使用不可变更新;选择器内不要创建新对象,否则可能无限渲染;多个 store 不可共用同一 storage 名称;SSR 下访问 localStorage 需配合 hydration 检查;服务端状态建议改用 TanStack Query。资料列出五类已知问题:hydration 不匹配、TypeScript 推断、createJSONStorage 导入错误、无限循环、slices 类型,并给出对应修复。依赖为 zustand ^5.0.14、React 18+、TypeScript 5+,兼容 React 19、Next.js 14+、Vite 5+。官方文档与 GitHub 地址见资料。