Понимание Zustand

Управление состоянием часто кажется слишком сложным.

Вы знаете, как использовать React useState. Вы знаете, как передавать пропсы. Вы знаете, как поднимать состояние (lift state up).

Но когда ваше приложение разрастается, всё ломается. Вы начинаете передавать данные через компоненты, которым они не нужны. Это называется prop drilling. Это делает ваш код запутанным и сложным в поддержке.

Zustand решает эту проблему. Он предоставляет вашему приложению общее состояние вне React-компонентов.

Представьте это так:

Без Zustand: Компонент A передает пропсы компоненту B, B передает пропсы компоненту C, а C передает пропсы компоненту D.

С Zustand: Каждый компонент напрямую взаимодействует с центральным хранилищем (store). Никаких посредников. Никакого prop drilling.

Хранилище Zustand состоит из двух вещей:

  • State: Ваши данные.
  • Actions: Функции, которые изменяют ваши данные.

В этом вся суть.

Zustand работает быстро, потому что он перерисовывает (re-renders) только те компоненты, которые используют конкретные изменившиеся данные.

Если вам нужно, чтобы данные сохранялись после перезагрузки страницы, используйте localStorage. Поскольку localStorage хранит только строки, вам необходимо использовать JSON.stringify для сохранения объектов и JSON.parse для их чтения.

Вот простой способ структурировать auth store:

  • Сохраняйте пользователя и токен в localStorage.
  • Используйте функцию login для обновления хранилища и браузерного хранилища.
  • Используйте функцию logout для очистки обоих.

Как он соотносится с Redux?

Redux требует наличия dispatchers и reducers. Он подразумевает написание большого количества шаблонного кода (boilerplate). Zustand позволяет вызывать функцию напрямую. Он требует меньше когнитивной нагрузки и упрощает настройку.

Распространенные ошибки, которых следует избегать:

  • Забываете вернуть объект в функции create. Используйте круглые скобки вокруг вашего объекта.
  • Используете точки с запятой внутри объекта состояния. Вместо них используйте запятые.
  • Пытаетесь распарсить данные, которые уже являются строкой.

Библиотеки управления состоянием нужны не для управления состоянием. Они нужны для управления сложностью.

Перестаньте пытаться зазубрить каждый API. Начните смотреть на проблему, которую пытается решить инструмент. Когда вы понимаете проблему, инструмент становится понятным.

Источник: https://dev.to/chinwuba_jeffrey/understanding-zustand-2g11