Альтернативы Redux: краткий обзор Zustand

Zustand – это минималистичная библиотека для управления состоянием в React-приложениях, предлагающая удобный API без лишнего кода. Она позволяет создавать хранилища в виде хуков, что упрощает процесс управления состоянием по сравнению с Redux. Основные преимущества Zustand – отсутствие необходимости в контексте, выборочные ререндеры и гибкость для локального и глобального использования.
Альтернативы Redux: краткий обзор Zustand
Изображение носит иллюстративный характер

Хранилище Zustand создается с помощью create, получая функцию set для обновления состояния и доступом к предыдущему состоянию. Компоненты React получают доступ к состоянию и экшенам через хук useStore, который позволяет подписываться на все изменения или на конкретные части состояния с помощью селекторов, предотвращая лишние перерисовки. Для работы с несколькими значениями используется useShallow.

Асинхронные операции, такие как загрузка данных с API, обрабатываются внутри экшенов хранилища, обновляя состояние с помощью set. Важно отметить, что Zustand можно использовать вне React, к примеру для работы с веб-сокетами, применяя createStore из zustand/vanilla. Библиотека также предоставляет возможность добавления middleware, такие как persist для сохранения состояния в localStorage, immer для работы с вложенными объектами и devtools для интеграции с Redux DevTools.

Для крупных приложений Zustand позволяет разделять хранилище на слайсы, что упрощает его организацию. Кроме того, Zustand подходит для динамических сторов, где структура может меняться во время выполнения. Также можно использовать useSyncExternalStore для интеграции с другими библиотеками. Важно отметить, что immer в Zustand требует аккуратного обращения с мутациями, а именно, использования produce для избежания прямых изменений состояния.


Новое на сайте

20854Как дешёвые Android-смартфоны превращаются в чужие прокси? 20853В Индии имя звонящего появится на экране вместе с номером 20852Как проверить готовность команды к звонку с клонированным голосом? 20851Уязвимости MarkLogic: делегированные права могли открыть путь к администраторскому... 20850Как GitHub закрыл лазейку, угрожавшую тысячам npm-пакетов? 20849Hirudo подменяет банковские приложения, чтобы обойти их защиту 20848Как Vghost превратил старую ошибку Linux в путь к root? 20847Уязвимости в PAN-OS и Cisco Secure Email Gateway уже используют атакующие 20846Как уязвимость GitLab могла открыть сервер для чужого кода? 20845Уязвимость SAP Cloud SDK могла отправить OAuth2-секреты злоумышленнику 20844Уязвимость в Nextcloud открыла путь к веб-оболочкам на серверах 20843Смогут ли малые ИИ-модели превратить бытовую технику в ботнет? 20842Пять уязвимостей NGINX: кому грозит риск и как закрыть его 20841Тайный диктофон в OpenAI: что утверждают следователи 20840Как проверять уязвимость входа, не заходя дальше дозволенного?
Ссылка