SuperAPI AI 工具集

zustand-state-management

前端与建站

查看项目

更新于 10-15 22:10

技能介绍

用途:为 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 地址见资料。