5月29日 01:38

Zustand 中间件怎么使用？有哪些内置中间件？

Zustand 中间件以函数组合方式包裹 create 的回调，从内到外依次嵌套。内置三个核心中间件：persist（状态持久化到 localStorage/sessionStorage）、devtools（接入 Redux DevTools 调试）、immer（简化不可变更新，可直接写 state.user.name = 'new'）。组合顺序：devtools 在最外层，persist 在内层，中间件顺序影响 set/get 的拦截链。

追问

persist 的 partialize 怎么过滤不需要持久化的字段？ partialize: (state) => ({ user: state.user }) 只持久化 user，token 等敏感或临时字段不会写入存储。反序列化时缺失字段会使用 create 中的初始值填充。

immer 中间件解决了什么问题？ React 要求状态不可变更新，深层嵌套需逐层展开 {...s, user: {...s.user, name: 'new'}}，代码冗长易出错。immer 让你直接赋值 state.user.name = 'new'，内部通过 Proxy 生成新对象。

中间件组合顺序有影响吗？ 有。devtools(persist(fn)) 中 persist 在内层，持久化后的状态变化才会被 devtools 捕获；反过来的话 devtools 记录的是持久化前。一般推荐 devtools 在外、persist 在内。

如何自定义中间件？ 中间件本质是高阶函数：(config) => (set, get, api) => config(fnSet, fnGet, api)，在 fnSet/fnGet 中插入自定义逻辑（如日志、节流、权限校验），然后调用原 set/get。

persist 持久化的状态怎么版本迁移？ persist 配置中提供 migrate 函数：migrate: (persisted, version) => { if (version === 0) return { ...persisted, newField: 'default' }; return persisted; }，配合 version 字段标识当前版本，自动执行迁移。

写段代码

ts
import { create } from 'zustand'
import { persist, devtools } from 'zustand/middleware'

const useStore = create(
  devtools(
    persist(
      (set) => ({
        token: '',
        setToken: (t: string) => set({ token: t }),
      }),
      { name: 'auth', partialize: (s) => ({ token: s.token }) }
    ),
    { name: 'AuthStore' }
  )
)

标签：React Zustand