Что такое Redux и как он работает.
Redux - это легкая «автономная» библиотека JavaScript, что означает, что ее можно использовать с любой структурой пользовательского интерфейса, чаще всего с ReactJS.
Примечание: чтобы использовать Redux с React, вы должны загрузить пакет React-Redux.
Redux - это инструмент управления состоянием, который работает как централизованное хранилище, что означает, что это единственное место для доступа к состоянию, также известное как Единый источник истины.
Единственный источник истины - это единственное место, где находится состояние приложения и к которому можно получить доступ.
Чтобы понять Redux, вы должны понимать «односторонний поток данных», известный как однонаправленный поток данных.
Вот сценарий:
1- У вас есть число как state
с начальным значением: 0 (строка 4)
2- Вы визуализируете это state
в представлении (строка 9)
3- Вы инициируете действие для изменения / обновления state
(строка 8)
4- state
уведомляет подписывающийся компонент (ы), используя состояние, в котором он был изменен.
5- Компонент (ы) повторно отрисовывается, чтобы отобразить новый state
.
Вы видите закономерность?
У вас есть состояние, которое отображается в view
, и представление запускает action
для изменения state
, что в конечном итоге изменит view
.
Именно так концептуально работает Redux.
Терминология Redux:
1- Магазин: объект, в котором находится состояние приложения.
2- Действие: объект, содержащий тип действия (события) и ДОПОЛНИТЕЛЬНЫЕ полезные данные.
3- Редуктор: функция (прослушиватель событий), которая принимает два аргумента (currentState, действие) и, в зависимости от типа действия (например, добавить или удалить), создаст новое состояние с новыми изменениями. и вернуть новое состояние.
4- Создатель действий: функция, которая создает действия, полезна, когда вы хотите создать динамические действия.
5- Отправка: это ЕДИНСТВЕННЫЙ СПОСОБ обновить состояние.
Вот что происходит:
1- Он принимает объект действия (событие) в качестве аргумента
2- Рассылка (отправка) события в магазин
3- В магазине есть редукторы (слушатели событий)
4- Редуктор отслеживает событие, которое он ждал, чтобы прослушать.
5- Редуктор возвращает обновленный
state
в магазин
6- Магазин уведомляет просмотр
7- Представление перерисовывается
6- Селектор: функция, позволяющая выбрать определенное значение или данные из магазина.
Помните, как до перехвата React useState
нам приходилось писать this.state.specificData
для доступа к определенным данным или значениям внутри state
?
Что ж, это именно то, что селекторы делают с магазином.
Почему вам следует использовать Redux?
Согласно документации Redux: «Redux упрощает понимание того, когда, где, почему и как state
в вашем приложении обновляется, и как логика вашего приложения будет вести себя, когда эти изменения произойдут».
В React есть концепция под названием «lifting state up
», что означает, что если у вас есть 2 компонента (назовем их c1 и c2), совместно использующие один и тот же state
, тогда вы должны lift the state up
родительскому компоненту и сделать c1 и c2 дочерними компонентами в родительском компоненте. компонент и передайте им общий state
как props
.
А теперь представьте, что у вас есть большое приложение, которое состоит из более чем 50 компонентов, и все они используют одни и те же state
… Ой!
Теперь вам нужно создать огромное дерево или цепочку компонентов, чтобы передать state
от прародителя (c1) к компоненту-внуку (c50).
Что, если state
будет меняться по ходу… вы не будете знать, кто, почему и когда, потому что ваше приложение слишком велико, чтобы отслеживать вещи предсказуемо.
Вот почему использование Redux чрезвычайно полезно в больших приложениях, потому что «оно служит централизованным хранилищем для state
, которое необходимо использовать во всем вашем приложении, с правилами, гарантирующими, что состояние может обновляться только предсказуемо».
Плюсы:
- Вы определяете, как создается
state
state
изменится только предсказуемым образом- Любой компонент может получить доступ к
state
из любой точки приложения. - Вы определяете, как изменить
state
и кому разрешено изменятьstate
- Вы определяете, кто может получить доступ к
state
, а также как и к чему именно разрешен доступ