Это было в начале этого года, когда я только что осмыслил различные концепции, которые вводит React; представлены в State, Props, архитектуре на основе компонентов и т. д. Я знал, что пришло время немного продвинуться и углубиться в то, что называется «Redux».

Я решил сначала кого-нибудь спросить, потому что, знаете, люди кое-что знают.
«Что вы думаете о Redux? ..»

Итак, изучение Redux - это тяжелая задача, не так ли?

Тогда мне пришлось отложить переход на Redux на пару недель, а затем на месяцы. Как разработчику или тому, кто хочет им стать, вам всегда будет чему поучиться. Как насчет полировки моих навыков CSS? Понимаете детали Webpack? Углубляетесь в Node JS? Узнаёте, почему они публикуют новую версию Angular каждые пару месяцев? Почесать крутость Vue? Немного поигрались с состоянием React? Блин, снова Redux!

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

Хватит мумбо-джамбо, и давайте перейдем к делу.

Зачем вообще нам нужен Redux?

По-настоящему интересным и динамичным приложением обычно является то, вокруг которого распространяется множество переменных; от той страницы к этой, от этого компонента к этому, от родителей к детям и наоборот ... и т. д.
Эти переменные перемещения в React называются Состояние. В простом React вы можете заставить их распространяться, используя Props или Context api.

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

Почему бы нам не взять состояния, которые нам понадобятся в различных частях нашего приложения, и объединить их в один файл, и назвать его Store, поскольку он в основном хранит наше глобальное State компоненты могут получить доступ к этому хранилищу и читать из него или записывать в него с помощью определенных токенов. Классная идея!

Представьте себе музей, в котором есть несколько хранителей, каждый из которых отвечает за определенный раздел в музее, в каждом разделе есть какие-то предметы. Посетители могут делать только две вещи: просматривать элемент или заменять его (они не могут изменять одно). Просмотр предмета - простой процесс, не требующий усилий, однако, если они хотят заменить предмет, они должны передать хранителю специальную карту. Каждая карта заменяет один или несколько предметов в соответствии с потребностями посетителя.

То же самое и в магазине Redux, только с другими названиями! Хранители называются редукторами, элементы - это переменные состояния, посетители - наши компоненты React, а специальные карточки называются действиями .
Некоторые музеи маленькие. Не каждому музею нужно несколько смотрителей, верно? Некоторым приложениям малого и среднего размера потребуется только один редуктор.

Давайте убедимся, что вы знаете, как построить каждую из них.

Начиная с действия (специальной карты, с помощью которой компоненты могут управлять состоянием). Это будет функция, которую компонент вызывает для управления состоянием внутри редуктора. Вы создадите эту функцию, она должна возвращать объект, этот объект может иметь столько свойств, сколько вы хотите (чтобы настроить, чем именно вы хотите манипулировать в магазине), но одно свойство является обязательным, это свойство «тип». Это свойство позволит редуктору идентифицировать эту карту и делать то, что необходимо.
Вот два простых действия (две простые специальные карты):

Первый только указывает редуктору свой тип, и редуктор, по-видимому, знает, что именно делать. Второй включает переменную «score» в переданный объект. Что мы делаем с этими действиями, которые мы создаем? Мы просто импортируем их в наши компоненты, а затем вызываем их там, когда это необходимо.

Как насчет редуктора? Как насчет крутого хранителя, который отвечает за государство и проверяет наши специальные карточки? reducer - это тоже функция, но мы никогда ее не вызываем. Мы только сообщаем Redux, что это наш редюсер, и Redux вызывает его всякий раз, когда мы запускаем действие, круто! Когда Redux вызывает наш reducer, он передает ему два аргумента: первый - это актуальное состояние, а второй - наше запущенное действие. . Функция reducer обычно представляет собой огромный оператор switch, чьи случаи относятся к типу действий, помните? В каждом случае редуктор возвращает объект, который полностью заменяет его Состояние.
Вот наш редуктор:

Обратите внимание, что объект, возвращаемый редуктором, заменяет все свое состояние, поэтому мы каждый раз распространяем состояние. ("…штат")

Ждать! Где же тогда мы определяем состояние? Как мы изначально устанавливаем элементы, за которые отвечает этот хранитель?
Redux вызывает редуктор в начале нашего приложения, и он ничего ему не передает. Мы используем это, передавая начальное состояние, когда никакая переменная состояния не передается редуктору (что происходит только при запуске приложения).
Итак, наш фактический редуктор будет:

Хорошо, теперь мы рассмотрели основные части Redux; действия и редукторы простым способом. Однако на данный момент наш магазин еще не подключен к нашему приложению React. Как нам это сделать?
Прежде всего, мы должны установить пакеты «redux» и «react-redux». Затем мы переходим к точке входа нашего приложения:

Мы создаем наш магазин с помощью функции createStore, оборачиваем наше приложение компонентом более высокого порядка Provider, а затем передаем его нашему магазину в качестве опоры.

Вот и все! Теперь мы готовы к практической части (посетители теперь могут выбирать специальные карточки, чтобы иметь возможность проверять наши предметы в музее и манипулировать ими). ​​
Чтобы компонент React мог просматривать или управлять состоянием в магазине, он должен быть к нему подключен.
Вот подключенный компонент:

Как видите, мы используем «connect», импортированный из пакета «react-redux», для подключения нашего компонента к магазину. Мы передаем «соединить» две очень интересные переменные, которые мы объявляем, «mapStateToProps» и «mapDispatchToProps». Эти две переменные (которые возвращают объекты) действуют точно так, как передают их имена. Первый отображает части состояния в свойства, а второй отображает некоторые из наших действий в свойства. Эти реквизиты предназначены для этого конкретного компонента.

Вот и все! 🤩 Теперь вы знаете основы Redux. Достаточно просто, не правда ли?

В этой истории есть еще некоторые подробности, которые вы обнаружите при разработке собственных приложений.
Например, мы обычно определяем наши типы действий (строки, помните?) В конкретном файле с именем 'actionTypes ', а затем импортировать их туда, где мы определяем наши действия и редукторы, потому что нелегко написать эти длинные строки, не допустив ошибки, не так ли?.
Еще одна вещь, нам иногда нужно сделать наши действия асинхронными (потому что, например, мы хотим дождаться ответа базы данных, прежде чем мы протыкаем хранилище). Redux не поддерживает это из коробки, мы обычно используем промежуточные пакеты, такие как «redux-thunk» или «redux-saga», чтобы помочь нам справиться с такими случаями.
Наконец, как насчет нашей логики? Что делать, если компонент запускает действие и передает ему затраченное время в секундах. Если мы хотим указать время в минутах в нашем состоянии, нам лучше реализовать нашу логику в самом действии, прежде чем передавать эту информацию в редуктор .

Это означает, что я рассмотрел только самые основные основы Redux, в соответствии с моим собственным пониманием. Обратите внимание, что то, что упомянуто в этой статье, можно применить как к React, так и к React Native.

В заключение, вы должны выполнять эти шаги каждый раз, когда вы хотите управлять своим состоянием Redux:
1- Создайте свое действие. (специальная карта)
2- Отрегулируйте его эхо в редукторе. (скажите хранителю, что именно делать, когда вы столкнетесь с этой конкретной картой.)
3- Подключите свой компонент к магазину и вызовите действие. (посетитель должен продемонстрировать специальную карту, чтобы она подействовала.)

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

📝 Прочтите этот рассказ позже в Журнале.

🗞 Просыпайтесь каждое воскресное утро и слышите самые интересные истории, мнения и новости недели, ожидающие в вашем почтовом ящике: Получите примечательный информационный бюллетень›