Неизменяемое состояние и объединение

Как и в случае с useState в React, нам нужно обновлять состояние неизменяемым образом.

Вот типичный пример:

import { create } from 'zustand';

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

Функция set предназначена для обновления состояния в хранилище. Поскольку состояние неизменяемо, оно должно было выглядеть следующим образом:

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

Однако, поскольку это общий шаблон, set на самом деле объединяет состояния, и мы можем пропустить часть ...state:

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

Вложенные объекты

Функция set объединяет состояние только на одном уровне. Если у вас есть вложенные объекты, вам нужно объединить их явно. Для этого используется оператор spread, как показано на рисунке:

import { create } from 'zustand';

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

Для сложных случаев использования рассмотрите возможность использования библиотек, которые помогают работать с неизменяемыми обновлениями. Вы можете обратиться к Обновление значений вложенных объектов состояния.

Флаг замены

Чтобы отключить поведение слияния, вы можете указать булево значение replace для set следующим образом:

set((state) => newState, true);

Комментарии