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

Что такое Редукс?

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

Почему мы используем Redux?

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

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

Создание вашего магазина Redux

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

  1. Используя npm или yarn, выполните следующие команды для установки зависимостей.
$ yarn add redux react-redux redux-thunk redux-devtools-extension

2. Создайте редуктор для состояния, которое вы хотите сохранить в своем глобальном состоянии. В этом примере я буду использовать marketReducer, который я реализовал в своем проекте Crypto Trading Simulator v2. Ссылка здесь, чтобы узнать больше об этом.

3. В нашем index.js мы добавим следующие импорты в начало файла, создадим наш магазин Redux и подключим магазин к нашему приложению с помощью компонента Provider, который мы импортируем. из библиотеки react-redux.

создать магазин

Содержит полное дерево состояний вашего приложения. Он принимает редюсер в качестве первого аргумента, предварительно загруженное состояние в качестве второго и энхансеры в качестве третьего.

применить ПО промежуточного слоя

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

удар

Промежуточное ПО, которое позволяет вам возвращать функции, а не только действия в Redux. Это позволяет выполнять отложенные действия, включая работу с обещаниями.

компоновкаWithDevTools

Подключает наше приложение к расширению Redux DevTools Extension. Этот инструмент позволяет нам выполнять отладку во времени и редактирование в реальном времени.

‹ Провайдер ›

Этот компонент позволяет нам хранить глобальное состояние и делать его доступным для любого из вложенных компонентов, которым требуется доступ к хранилищу Redux.

Создатели действий

В этом примере у нас будет один создатель действия, который использует axios для отправки запроса на выборку в удаленный API CoinGecko и получения 100 лучших криптовалют на их рынке. Затем мы собираемся отправить еще одну отправку нашему редьюсеру и обновить наше глобальное состояние с помощью ответа от удаленного API.

Подключение нашего компонента к Redux Store

В этом примере мы будем работать с одним дочерним компонентом MarketTable.js, вложенным в наш компонент App.js.

Примечание. Эти компоненты будут использовать пользовательский интерфейс материалов

Объектно-ориентированный (классы)

Чтобы подключить наш компонент класса к хранилищу Redux, мы собираемся импортировать функцию connect() из react-redux, сопоставить состояние, которое мы хотим сделать доступным, с компонент в качестве реквизита и передайте его в качестве первого аргумента, передайте нашим создателям действий в качестве второго аргумента следующим образом:

Функциональный

Чтобы подключить наш функциональный компонент к хранилищу Redux, мы воспользуемся хуками useSelector() и useDispatch(). Это настраиваемые хуки React Redux, которые позволяют нам подписываться на хранилище Redux и отправлять действия.

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

Если вам нужна дополнительная информация о проекте, который использовался здесь в качестве примера, перейдите по этой ссылке на сообщение в блоге и по этой ссылке на репозиторий GitHub.