Сегодня я собираюсь пройтись по React и Redux. Это все, что касается гидропонной системы мониторинга, о которой я говорил. В то время как задняя часть все еще нуждается в работе, отделке и чистке, я решил использовать свое свободное время, чтобы заглянуть в будущее (и на свою более слабую область) и изучить немного переднюю часть.

Поскольку я уже потратил немало времени на изучение основ React, я прохожу курс Learn Redux Веса Боса. На момент этой первоначальной публикации у меня было 9 видео из 20, и пока все хорошо. Главный плюс этого курса в том, насколько коротким и приятным является каждое видео. Полный курс составляет 2,5 часа, что (намного) меньше, чем у любого фильма Властелин колец. Добавьте к этому ведение заметок и время, необходимое для сбора информации, и получится немного больше времени, но вполне выполнимое за один или два сеанса. (И, вероятно, все еще короче, чем любой фильм LOTR.)

Библиотеки:

Как я уже сказал, я уже немного в курсе уроков Веса Боса. Поскольку курс посвящен Redux, он ожидает четкого понимания React и не охватывает его деталей (хотя он предлагает отдельный курс по React). Итак, вот моя TL;DR-версия React: это библиотека JavaScript для создания компонентов. на основе пользовательских интерфейсов. После определения компонентов их можно использовать и повторно использовать в интерфейсе по своему усмотрению (это называется композицией или композицией). Внешний вид компонента зависит от данных, к которым у него есть доступ через свойства и состояние конкретного экземпляра (реквизиты и состояние).

Если вы новичок в React, официальный учебник — отличный практический ресурс, а в документации легко ориентироваться.

Итак, что такое Редукс? Это менеджер состояния приложения. Что такое государство? Прямо из документов Redux:

…состояние может включать ответы сервера и кэшированные данные, а также локально созданные данные, которые еще не были сохранены на сервере. Состояние пользовательского интерфейса также усложняется, так как нам нужно управлять активным маршрутом, выбранной вкладкой, показывать ли счетчик или нет, должны ли отображаться элементы управления разбиением на страницы и так далее.

Поэтому React отображает свои компоненты в зависимости от состояния. Redux управляет состоянием. Это брак, заключенный на небесах. (Примечание: Redux не является специфичной библиотекой React, но они прекрасно работают вместе.)

Уроки:

Короткометражка на Redux. Он вращается вокруг трех вещей:

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

Действия чем-то похожи на события в обычном JavaScript. Они подключаются к кнопкам, ховерам и т. д. и срабатывают, когда пользователь взаимодействует со страницей. У них должно быть свойство type, которое работает как сигнатура события (о его использовании см. в разделе Редукторы). Остальная часть объекта в этом примере — это полезная нагрузка. (Дополнительные параметры свойств см. здесь.) Эта информация используется логикой, которая сообщает приложению, что делать, когда действие срабатывает. В Redux эта логика называется…

Reducer: это логика того, какие действия следует отслеживать и что делать, когда они происходят. Когда редьюсер получает небольшой пакет данных от действия, он изменяет хранилище данных. (Исходя из среды MVC, редукторы очень похожи на контроллер.) У вас будет файл редуктора для каждой части состояния (в этом приложении есть сообщения и комментарии)

Две важные вещи о редьюсерах:

  • Несмотря на то, что существуют отдельные файлы редюсеров, для остальной части приложения может быть только один интерфейс редуктора. Все файлы редуктора должны быть импортированы в один «корневой редуктор».
  • Каждый раз, когда вызывается какое-либо действие, запускается каждый редьюсер. Но, конечно, не всем редукторам нужно реагировать на каждое действие. Идеальный вариант использования для «переключателя/кейса».

(Читать в порядке индекса→сообщения→комментарии.)

Таким образом, редюсер имеет доступ как к текущему состоянию приложения до того, как оно что-либо запустит, так и к действию, которое только что было запущено (тип и полезная нагрузка). Он решает, следует ли воздействовать на действие, проверяя его тип по параметрам переключателя/регистра.

Внутри редьюсера создается новое состояние (как возвращаемый объект/массив), и после запуска кода редюсер возвращает это новое состояние, которое представляется пользователю через React. Важно, чтобы старое состояние не мутировало.

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

Интересный факт: вы не можете использовать асинхронную операцию в редюсере с необработанным Redux. Но для этого есть плагины.

Магазин. Сбор всей важной информации о состоянии и способах ее изменения при необходимости.

Это довольно очевидно, хотя, чтобы узнать, что происходит под капотом, вам придется прочитать некоторые документы. Все в строке 21 предназначено исключительно для включения Chrome DevTools Redux и может быть исключено из createStore.

Так чем же все это полезно для React?

Ну, это не так, если вся информация не будет подключена, и для этого пригодится библиотека react-redux.

Как говорится в длинном комментарии в строке 20, цель этого файла — сделать состояние и действия доступными для компонентов React в качестве свойств. Основной компонент является корневым родительским компонентом в этом приложении, поэтому имеет смысл отображать реквизиты там и передавать их дочерним элементам по мере необходимости. Фактически, визуализируя компонент Main с помощью…

render() {...
{React.cloneElement(this.props.children, this.props)}
...}

Все дочерние элементы Main имеют реквизиты Main. У них есть состояние и действия, доступные немедленно. Это здорово, потому что действия привязываются к нажатиям кнопок и т. д., и потребовалось бы приличное количество дополнительного кода, чтобы пройти через передачу реквизита через каждого дочернего элемента индивидуально.

В заключении

Это много всего! Я понимаю, что делаю, но это приложение в значительной степени полагалось на внешние библиотеки. Мне нужно немного покопаться в этих библиотеках, чтобы создать собственное приложение, но этот курс определенно заложил основу словарного запаса и использования.

Это все на данный момент. Удачного кодирования!