How to set object key in state using zustand

Question

I am using zustand for state management. My store is setup as follow :

import create from 'zustand';

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

When i call setFilters I only expect evaluationMonth to change, but it's also removing the existing values (searchQuery in this case). How do i persist the old statet while changing the desired values.

The title might be a little off, 'persist' in zustand is a [middleware](https://github.com/pmndrs/zustand#persist-middleware) to utilize local storage for persisting the state after reloading or closing the website. A better title would be "How to avoid losing old object state when mutating it". — Ahmed Mohamedeen, Apr 02 '21 at 18:27

score 3 · Accepted Answer · answered Apr 02 '21 at 18:16

You can do this by spreading the state parameter in the set function. Make sure that the value(s) you want to override is the last element in the object to avoid it being overridden by the old state spread.

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

score 2 · Answer 2 · answered Aug 10 '21 at 12:51

To avoid spreading each level of the state and keep your code similar to your example, you can also use immer as middleware. If you are not familiar with immutability, this will save you a lot of debugging time.

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' }))
}));

How to set object key in state using zustand

2 Answers2