Повысьте уровень обработки состояния в React: почему Zustand помогает вам управлять состоянием как профессионал, а не Redux?

Рабах Али Шах

Следовать

Слушать

Делиться

Управление состояниями — одна из самых сложных частей при создании приложения, с которой приходится сталкиваться каждому разработчику. Без сомнения, с помощью React Hooks эту проблему можно решить, но в больших приложениях управление состоянием может становиться все более и более сложным. В таких случаях мы не можем просто полагаться на очень распространенные хуки React, такие как useState, useReducer и т. д. Поскольку каждая библиотека предлагает решение конкретной проблемы. В случае React и для более сложного управления операторами Дэн Абрамов представил библиотеку под названием Redux.

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

Создание хранилища Redux:

Вот как вы создаете хранилище Redux, содержащее начальные состояния, функции редуктора или действия, которые мы хотим выполнить с нашими состояниями для обновления их текущих состояний. В этом случае это хранилище фактически содержит всю логику для простого счетчика, который добавляет или вычитает значения, нажимая кнопку «Увеличить» или «Уменьшить» соответственно.

После того, как мы создали наш магазин, пришло время связать его с нашим компонентом React:

Поверх нашего приложения в файле index.js мы предоставляем приложению хранилище Redux. Проще говоря, мы объявляем наш магазин на верхнем уровне нашего приложения React, чтобы его состояние было доступно всем его дочерним элементам.

Теперь перейдем к файлу, в котором мы хотим использовать наш Redux Store:

Вам понадобится хук useSelector, чтобы получить данные из хранилища Redux, а затем, используя хук useDispatch, вы сможете вызвать действие для обновления вашего состояния.

Вот как вы управляете состояниями в Redux.

Проблема, которую вы, возможно, заметили, — это длинный шаблон Redux. Даже для управления такой простой логикой вам придется настроить все вышеупомянутые шаблоны Redux. И иногда становится сложно понять, что происходит с Redux, потому что для получения данных вам нужен дополнительный хук useSelector, а для вызова действия вам нужен хук useDispatch. Это становится неудобно использовать в более крупных приложениях, где управление состоянием намного сложнее.

Решением этой проблемы является Зустанд. Это небольшое, быстрое и масштабируемое решение для управления состоянием React, использующее упрощенные принципы Flux. Zustand использует ту же концепцию централизованного хранилища, которое управляет вашим состоянием и доступно во всем вашем приложении.

Самое лучшее в Zustand — это то, что в отличие от Redux вам не нужно настраивать длинный шаблон и использовать дополнительные перехватчики для чтения, вызова и управления состояниями. Все, что вам нужно, — это создать магазин и просто использовать его в любом месте вашего приложения React. Нет необходимости размещать своего провайдера на верхнем уровне приложения.

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

Посмотрите, как просто создать магазин в Зустанде. Просто используя функцию создания. После того, как вы создали свой магазин с помощью Zustand. Пришло время связать его с вашим компонентом, где вы хотите читать данные из вашего магазина.

Вот как вы собираетесь вызывать функции редуктора, так называемые действия. Просто импортируйте свое действие и вызовите его. Вот и все! НЕТ НЕОБХОДИМОСТИ дополнительных хуков для чтения и отправки действий. Просто импортируйте и используйте их.

Я надеюсь, что после просмотра всего вышеприведенного кода, простоты Zustand и его сравнения с Redux вы получили ответ, но все же ниже приведены некоторые преимущества, которые вы получите при использовании Zustand.

Управление состояниями может оказаться сложной задачей в более сложных и крупных приложениях. Без сомнения, Redux и такие хуки, как useContext и useReducer, помогут нам. Но проблема в том, что долгая и сложная настройка шаблона делает Redux менее удобным для пользователя при управлении состояниями.

Представляем Zustand — небольшое, быстрое и масштабируемое решение для управления состоянием приложений React. Его простота, меньшее количество шаблонных настроек и удобное управление состоянием делают его более предпочтительным, чем Redux. Не стесняйтесь использовать Zustand в своих проектах и наслаждайтесь красотой управления состояниями простым и понятным способом.