zustand

• React

梗概

Zustand是一个轻量级的React状态管理库，相比Redux更简单直观，支持原生异步处理，使用浅合并进行状态更新。

特点

• 相比redux更简单，没有那么多复杂概念
• 支持原生异步处理，可以直接使用async/await
• 默认使用浅合并更新状态（等同于{...state, targetProp: value}）
• 轻量级，bundle size小

注意事项

• 浅合并特性意味着更新嵌套对象时需要手动处理深层更新
• 如果需要深合并，需要自己实现或使用第三方工具如immer

进阶用法

1. 处理嵌套对象更新

由于set函数默认是浅合并，在更新嵌套对象时，必须手动展开旧状态，否则会丢失未修改的属性。

// 假如原state中user:{age: 24, name:tom}
 
// ❌ 错误：会删除user.name
set({ user: { age: 31 } }) 
// 结果：{ user: { age: 31 } } (name 丢失！)
 
// ✅ 正确：展开原有属性
set(state => ({
  user: { ...state.user, age: 31 }
}))

2. 使用 Immer 中间件

为了简化嵌套对象的更新，可以引入immer中间件。它允许你像直接修改（mutable）对象一样更新状态，而无需担心不可变性。

import { create } from 'zustand'
import { immer } from 'zustand/middleware/immer'
 
const useStore = create(immer((set) => ({
  user: { name: "Bob", age: 30 },
  
  updateName: (name) => set(state => {
    state.user.name = name // ✅ 直接修改！
  }),
 
  updateAge: () => set(state => {
    state.user.age = 40 // ✅ 直接修改！
  })
})))