В этой статье мы рассмотрим, как Zustand обеспечивает замену состояния с помощью функции setState, уделяя особое внимание интересной особенности: переопределению состояния без слияния. Мы объясним, как его использовать, на простом тестовом примере.

Понимание слияния состояний и переопределения состояний

Прежде чем взглянуть на код, важно понять разницу между слиянием и переопределением состояния.

• Состояние слияния: По умолчанию, когда вы обновляете состояние в Zustand (или React), новое состояние объединяется с существующим состоянием. Изменяются только обновленные поля, остальная часть состояния остается неизменной.

• Переопределение состояния: Напротив, переопределение состояния заменяет все состояние новым объектом, отбрасывая все поля, которые присутствовали в предыдущем состоянии, но не являются частью нового штата.

Когда следует переопределить состояние

Есть ситуации, когда необходима замена всего состояния, например:

• Сброс состояния после отправки формы.

• Полная замена состояния при загрузке другого набора данных.

Тестовый пример для переопределения состояния Zustand

Вот простой тестовый пример из кодовой базы Zustand, который демонстрирует, как переопределить состояние с помощью функции setState:

it('can set the store without merging', () => {
  const { setState, getState } = create(
    (_set) => ({
      a: 1,
    }),
  )

  // Should override the state instead of merging.
  setState({ b: 2 }, true)
  expect(getState()).toEqual({ b: 2 })
})

Разбор теста

1. Создание магазина Сначала создается магазин Zustand с исходным состоянием:

const { setState, getState } = create(
    (_set) => ({
      a: 1,
    }),
  )

Начальное состояние — это объект с единственным свойством, которому присвоено значение 1. Функция create возвращает два основных метода:

• setState: Этот метод используется для обновления состояния хранилища.

• getState: Этот метод извлекает текущее состояние хранилища.

2. Переопределение состояния Ключевой операцией здесь является замена текущего состояния { a: 1 } совершенно новым состоянием:

setState({ b: 2 }, true)

• Передавая флаг true в качестве второго аргумента, Zustand знает, что он должен переопределить состояние, а не объединять новый объект { b: 2 } с существующим. Это полностью заменяет предыдущее состояние, поэтому { a: 1 } удаляется, а новое состояние становится { b: 2 }.

3. Проверка замены состояния Наконец, тест гарантирует, что состояние было полностью заменено:

expect(getState()).toEqual({ b: 2 })

Ожидается, что после вызова setState({ b: 2 }, true) состояние хранилища будет содержать только { b: 2 } и больше не будет содержать { a: 1 }.

Как Зустанд отменяет состояние

Изображение ниже взято из исходного кода Zustand, который устанавливает состояние.

Как видите, если флаг замены существует, nextState становится новым состоянием.

(replace ?? (typeof nextState !== 'object' || nextState === null))

Это умный способ: если replace имеет значение false, что по умолчанию, (typeof nextState !== 'object' || nextState === null)) проверяется условие.

Заключение

Zustand предлагает простой способ управления состоянием в React, а возможность полностью переопределить состояние с помощью setState с флагом override обеспечивает дополнительную гибкость. Если вы хотите сбросить форму, загрузить новые данные или удалить старые значения, эта функция позволяет вам полностью контролировать управление и обновление состояния в вашем приложении.

О нас:

В Think Throo мы стремимся обучать передовым архитектурным концепциям кодовой базы, используемым в проектах с открытым исходным кодом.

Увеличьте свои навыки программирования в 10 раз, практикуя передовые архитектурные концепции в Next.js/React, изучайте лучшие практики и создавайте проекты промышленного уровня.

У нас открытый исходный код — https://github.com/thinkthroo/thinkthroo (дайте нам звезду!)

Повышайте квалификацию своей команды с помощью наших продвинутых курсов, основанных на архитектуре кодовой базы. Свяжитесь с нами по адресу [email protected], чтобы узнать больше!

Ссылки:

1. https://github.com/pmndrs/zustand/blob/v4.5.5/tests/basic.test.tsx#L471C13-L471C50

2. https://github.com/pmndrs/zustand/tree/v4.5.5?tab=readme-ov-file#overwriting-state