5月30日 01:39
如何在 Zustand 中自定义中间件?
Zustand 自定义中间件本质是包一层 config:拦截 set/get/api,再把增强后的能力交还给 store。常见用途是日志、校验、性能埋点、撤销重做。面试里先说函数签名,再强调两点:不要破坏原始 set 语义;组合多个 middleware 时外层先执行,顺序会影响结果。
追问
自定义 middleware 和普通 action 封装有什么区别?
普通 action 只管某个业务动作;middleware 能统一拦截所有状态更新,适合横切能力,比如日志、持久化、校验。
set 包装时最容易踩什么坑?
别忘了转发 replace 参数,也不要在 middleware 里无条件再次调用增强后的 set,否则可能递归或改变 replace 行为。
多个 middleware 的执行顺序怎么看?
create(a(b(config))) 中,a 先拿到 config 并包装,实际更新时通常外层逻辑先触发。日志、persist、immer 混用时要明确谁先处理原始对象。
实际项目会怎么用?
我更倾向把日志、权限校验、状态快照放 middleware,业务状态变化仍留在 action 里,避免 middleware 变成黑盒业务层。
写段代码
javascriptconst logger = (config) => (set, get, api) => config((partial, replace) => { const prev = get(); const ret = set(partial, replace); console.log('zustand change', { prev, next: get() }); return ret; }, get, api); const useStore = create(logger((set) => ({ count: 0, inc: () => set((s) => ({ count: s.count + 1 })) })));