Understanding 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 працює швидко, тому що він перерендерить лише ті компоненти, які використовують конкретні дані, що змінилися.

Якщо вам потрібно, щоб дані зберігалися після оновлення сторінки, використовуйте 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