如何使用zustand在状态下设置对象键

Question

我正在使用zustand进行状态管理。我的商店设置如下：

import create from 'zustand';

export const useStore = create((set) => ({
    filters: {searchQuery: 'hello', evaluationMonth : null},
    setFilters: (e) => set((state) => ({filters : {evaluationMonth : 'New Month'}})),
}))

当我调用setFilters时，我只期望evaluationMonth会改变，但它也会删除现有的值(在本例中是searchQuery)。如何在更改所需值的同时保持旧的statet。

Answer 1

您可以通过在set函数中扩展state参数来实现这一点。确保要覆盖的值是对象中的最后一个元素，以避免被旧状态扩展覆盖。

export const useStore = create((set) => ({
    filters: {searchQuery: 'hello', evaluationMonth : null},
    setFilters: (e) => set((state) => ({filters : {...state.filters, evaluationMonth : 'New Month'}})),
}))

Answer 2

为了避免分散状态的每个级别，并保持代码与示例相似，您还可以使用immer作为中间件。如果您不熟悉不变性，这将为您节省大量的调试时间。

import create from 'zustand';
import produce from 'immer';

export const useStore = create((set) => ({
  filters: {searchQuery: 'hello', evaluationMonth : null},
  setFilters: () => set(produce(state => { state.filters.evaluationMonth = 'New Month' }))
}));