SuperAPI AI 工具集

zustand-middleware

通用与其它

查看项目

更新于 10-16 02:28

技能介绍

用途:面向使用 Zustand 的前端开发者,说明如何通过中间件增强 store 功能,包括持久化、Redux DevTools 调试、Immer 不可变更新等。

主要能力:persist 可将状态保存并恢复到 localStorage、sessionStorage 或自定义存储(如 IndexedDB、React Native AsyncStorage),支持 name、storage、partialize、onRehydrateStorage、version 与 migrate 等选项;devtools 可接入 Redux DevTools,支持 name、enabled、anonymousActionType、trace;immer 允许用可变写法生成不可变更新;还包含 store 订阅与取消订阅、自定义中间件(日志、reset)的实现方式。

使用方式:从 zustand/middleware 导入 persist、devtools、createJSONStorage,从 zustand/middleware/immer 导入 immer;中间件包裹 store creator,组合顺序为从内到外,例如 create(devtools(persist(immer(...))))。订阅通过 useStore.subscribe 完成,需返回 unsubscribe 进行清理。

适用场景:需要跨会话保存购物车、主题、语言等设置的场景;需要调试状态变更的场景;以及希望通过自定义中间件统一加入日志、重置等能力的项目。

限制与注意事项:资料明确警告不要用 persist 保存敏感数据(如 token),应改用安全存储并配合 partialize 只持久化必要字段;不要忽视中间件顺序;未使用 immer 时不可直接修改 state;组件内订阅必须清理以避免内存泄漏。资料未提供版本要求、安装命令、平台支持范围及收费信息。