如何使用 zustand 保持状态

问题描述

我正在使用 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）。我如何在更改所需值的同时保留旧状态。

解决方法

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

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

,

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

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

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