В этом современном мире React у нас, как у разработчиков, есть множество вариантов инструментов управления состоянием, в этой статье я собираюсь объяснить, почему использование Redux может быть хорошей реализацией над Context API и простым способом реализовать его на вашем компьютере. app с помощью хуков, поэтому вы можете уменьшить количество шаблонов в своем коде.
Что такое Redux?
Согласно сайту redux:
«Redux - это контейнер с предсказуемым состоянием для приложений JavaScript.
Он помогает вам писать приложения, которые ведут себя согласованно, работают в разных средах (клиентских, серверных и собственных) и легко тестируются. Вдобавок ко всему, он обеспечивает отличные возможности разработчика, такие как редактирование кода в реальном времени в сочетании с отладчиком, путешествующим во времени.
Таким образом, вы можете понять, почему Redux является обычным выбором большинства разработчиков при создании средних и больших приложений, и это один из самых популярных менеджеров состояний, доступных для разработчиков, отвечающих за реагирование.
Что такое Context API?
Согласно документации React.js:
«Контекст предоставляет способ передавать данные через дерево компонентов без необходимости передавать реквизиты вручную на каждом уровне».
Этот вариант проще благодаря тому, что он уже поставляется с React, разработчик может использовать его без установки каких-либо пакетов.
Теперь, когда вы знаете об этих двух типах способов передачи данных, почему использование Redux вместо Context может быть проще?
Короткий ответ заключается в том, что это будет не так просто с точки зрения «меньшего количества кода» или чего-то в этом роде, но с новым синтаксисом хуков он будет более «похожим», как если бы вы писали свой код с использованием контекста.
Установка зависимостей:
Во-первых, вам нужно будет установить 2 зависимости response-redux и redux, вы также можете установить redux-thunk, если хотите, но я расскажу об этом в другом посте.
(Небольшое примечание здесь, это руководство также может работать, если вы хотите понять некоторые основы Redux и то, как его использовать.)
Теперь вам нужно создать 2 новые папки: ваши действия и папки редукторов.
Действия: Действия - это полезные данные, которые отправляют данные из вашего приложения в ваш магазин. Они являются единственным источником информации для магазина .
Редукторы: Редукторы определяют, как изменяется состояние приложения в ответ на« действия , отправленные в магазин. Помните, что действия описывают только то, что произошло, но не описывают, как изменяется состояние приложения ".
Теперь, когда у нас есть эти папки, пора создать наш Магазин.
Магазин: В предыдущих разделах мы определили« действия , которые представляют факты о том, что произошло , и редукторы , которые обновляют состояние в соответствии с этими действиями».
А для этого перейдем в App.js и начнем процесс создания магазина и упаковки всего приложения под провайдером.
Пришло время создать корневой редуктор, здесь вы будете обрабатывать все редукторы, необходимые вашему приложению для правильной работы.
После создания вашего корневого редуктора нам нужно еще 2 вещи: наше действие и использование тех хуков response-redux для redux, о которых я вам говорил в начале поста.
Когда вы создали свое действие, теперь перейдите к той части приложения, которую вы вызовете, чтобы это действие было «отправлено» в магазин,
Dispatch: К функции dispatch () можно получить доступ прямо из магазина как « store.dispatch () , но, скорее всего, вы получите доступ к ней, используя такой помощник, как connect () react-redux. «
а затем поверх импорта «{useSelector, useDispatch}» из «react-redux», это то, что сделает все, чтобы все работало красиво и легко.
И это все! Теперь, если вам нужно добавить дополнительное состояние в свой магазин, добавьте редуктор в свой корневой редуктор, создайте действие и затем отправьте его, когда вам это нужно! С хуками, использующими Redux, это быстрее и легче понять, чем это было раньше.
