Несмотря на всю мощь React, с ростом приложения довольно быстро появляются некоторые неудобства. Одно из самых раздражающих — подъём состояния наверх через колбэки, которые нужно прокидывать в самый низ с того самого верхнего уровня. Прокидывать приходится не только колбэки, но и любые данные. Получается, что множество промежуточных компонентов выступают в качестве прокси, то есть пропускают сквозь себя данные, которыми не пользуются. Второе — рендеринг и логика мешаются в одном месте, быстро раздувая компоненты и усложняя их понимание. Сюда добавляются неконтролируемые побочные эффекты вперемешку с обновлением данных.

Для решения в том числе этих проблем разработчики Facebook придумали архитектуру Flux:

Архитектура
Flux

Архитектура Flux вводит ряд новых понятий, таких как:

  • Stores — хранилища, место, в которое загружаются данные и в котором они обновляются. Хотя во Flux хранилища мутабельные, взаимодействовать с внешним миром внутри них нельзя. Никаких AJAX-запросов, взаимодействия с DOM и т.п. Менять данные напрямую тоже не получится, только посредством действий. Как видите, во Flux-архитектуре управление состоянием приложения было вынесено наружу.
  • Actions — действия с помощью Dispatcher передаются в хранилища, которые на основе типа действия и данных, пришедших с ним, сами себя обновляют.
  • Dispatcher — раскидывает действия по хранилищам.

Flux-архитектура позволила разгрузить React и ввела недостающие абстракции. В своё время появилось множество различных реализаций этой архитектуры. Одна из них была официальная и десяток неофициальных.

С тех пор утекло много воды и мир шагнул вперёд. В 2015 году Дэн Абрамов создал библиотеку под названием Redux, заимствовав идеи из Flux и функционального языка Elm.

Сама по себе Redux очень простая библиотека, предназначенная исключительно для управления состоянием. Она хоть и была разработана для использования в React, но от него не зависит и может использоваться с чем угодно. Для её связи с React понадобится библиотека react-redux, с помощью которой производится необходимая интеграция. В итоге получается структура, крайне напоминающая Flux-архитектуру, но со значительными упрощениями и улучшениями.

Кроме тех преимуществ, которые даёт Flux, Redux привносит ещё кое-что:

  • Time traveling. Возможность путешествовать по изменению состояния назад и вперёд. Очень полезно при отладке, всегда можно отмотать (это не фигуральное выражение, а действительность) назад.
  • Удобная отладка и визуализация. Посредством Middlewares, Redux расширяется инструментарием, который предоставляет крайне удобные средства для отладки и визуализации происходящих внутри процессов. С ними мы познакомимся в ближайшее время, чтобы сразу начать использовать всю мощь Redux.
  • Благодаря стандартизации работы с состоянием, которую привнёс Redux, стало возможным автоматизировать практически все аспекты работы в React. Работа с формами, маршрутизация, асинхронность, история и многое другое.

В этом курсе мы пройдём по основным возможностям Redux и интегрируем в создаваемое приложение множество разных библиотек. Мы не сможем копнуть в них глубоко, так как объем документации каждой библиотеки тянет на целую книгу, но разберём базовые варианты использования.

Основные темы:

  • Redux.
  • Middlewares.
  • Containers.
  • Actions (Async).
  • Redux & React.

Библиотеки:

  • reselect.
  • redux-actions.
  • redux-forms.
  • redux-thunk.

По ходу курса мы создадим приложение для работы с задачами и в конце интегрируем его с бэкендом.

Мы учим программированию с нуля до стажировки и работы. Попробуйте наш бесплатный курс «Введение в программирование» или полные программы обучения по Node, PHP, Python и Java.

Хекслет

Подробнее о том, почему наше обучение работает →