Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете
JS: Redux (React)

Введение

Несмотря на всю мощь 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.

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


<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Для полного доступа к курсу нужна профессиональная подписка

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

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».