Zustand
  • 简体中文

      • 不可变状态与合并

      与 React 的 useState 一样，我们需要以不可变的方式更新状态。

      下面是一个典型示例：

      import { create } from 'zustand'

const useCountStore = create((set) => ({
  count: 0,
  inc: () => set((state) => ({ count: state.count + 1 })),
}))

      set 函数用于更新 store 中的状态。 由于状态是不可变的，按理说应该这样写：

      set((state) => ({ ...state, count: state.count + 1 }))

      不过，因为这是一种常见模式，set 实际上会合并状态，因此我们可以省略 ...state 这部分：

      set((state) => ({ count: state.count + 1 }))

      嵌套对象

      set 函数只在一个层级上合并状态。 如果你有嵌套对象，就需要显式地合并它们。需要像这样使用展开运算符模式：

      import { create } from 'zustand'

const useCountStore = create((set) => ({
  nested: { count: 0 },
  inc: () =>
    set((state) => ({
      nested: { ...state.nested, count: state.nested.count + 1 },
    })),
}))

      对于复杂的用例，可以考虑使用一些辅助实现不可变更新的库。 你可以参考更新嵌套的状态对象值。

      replace 标志

      要禁用合并行为，可以像这样为 set 指定一个布尔值 replace：

      set((state) => newState, true)