Что такое 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, а также как и к чему именно разрешен доступ