Купить официальную электронную книгу
Если вы хотите поддержать автора и получить копию книги в формате PDF, EPUB и / или MOBI, пожалуйста, купите официальную электронную книгу.
Предпосылки
Изучите основы React, ES6 и базовую сборку приложения React (NPM, Webpack, Babel).
Если вы еще не изучили React, вот электронная книга, которую я написал, под названием React.js для Visual Learner.
Что ожидать
Прежде чем я начну какое-либо обучение по Redux, я хочу прояснить формат этой книги и мою методику преподавания.
Моя миссия - научить Redux максимально практично с нуля. Я могу быть суперпрактичным, потому что пишу эту книгу, когда сам изучаю Redux. То есть, когда у меня бывают моменты «а-ха», когда что-то щелкает. Я могу объяснить вам, что именно заставило меня щелкнуть. Я буду использовать истории, аналогии и наглядные примеры, чтобы повторить то, что я узнал.
Поскольку я подчеркиваю практичность во всех своих статьях, я обычно склонен ошибаться, давая слишком много объяснений, чем недостаточно. Когда люди преподают по предмету и делают всевозможные предположения, мне очень сложно. Помимо предпосылок, указанных выше, я сделаю все возможное, чтобы не делать предположений о «не столь очевидном».
Очень важно отметить заранее, что я стремлюсь к тому, чтобы эта книга была предназначена для объединения Redux с React.
Что касается формата, я собираюсь провести первые пару глав с гораздо большим количеством текста, чем кодированием. Причина в том, что он будет сосредоточен на реализации основных концепций. Когда мы начнем писать код, я буду писать код «за кулисами». То есть я собираюсь использовать онлайн-редакторы, в которых мы можем создавать небольшие фрагменты кода, чтобы изучать основы Redux, не отвлекаясь на сборку проекта. После того, как мы рассмотрим основы по частям, мы создадим весь проект с нуля, который даст нам хорошее введение в работу с React и Redux. Затем мы переходим к работе с Firebase, рассматриваем более сложные концепции Redux и создаем окончательный проект, включающий службу API. К концу этой книги вы должны иметь твердое представление о том, как работать с React, Redux, Firebase, Express и MonogoDB в реальных условиях. Я делаю это, чтобы добиться дальнейшего прогресса в своей карьере в сфере развития, и я хочу, чтобы это оказало такое же влияние и на вас.
Оставив все это в стороне, давайте начнем путешествие!
Зачем использовать Redux?
Согласно официальной документации, Redux - это контейнер с предсказуемым состоянием для приложений JavaScript. Он не зависит от React, однако мы собираемся изучить его варианты использования и преимущества для использования с React.
Redux - это, вероятно, модное слово, которое часто употребляется в жаргоне разработчиков React. Если ваша реакция была такой же, как у меня, это всегда была одна из тех вещей, о которых я ничего не знал, кроме этого официального определения. Я никогда не мог ответить: «Зачем мне использовать Redux?»
По общему признанию, я уже просматривал документацию Redux раньше. Однако я очень быстро просмотрел документацию, сразу перешел к коду и подумал: «Это выглядит запутанным. Что ж, с моими проектами React все в порядке. Я отложу это на другой раз ».
Давайте потратим время, чтобы по-настоящему понять, почему нам нужно изучать Redux, прежде чем двигаться дальше.
Главное, что нужно помнить о Redux, - это альтернативный способ управления состоянием в React. Под состоянием я имею в виду this.state = {...} материал, который вы видите в конструкторе ES6:
class NormalReact extends React.Component {
constructor() {
super();
this.state = {message: "This is a local state."};
}
}
Локальное состояние используется для управления данными, которые будут обновляться в вашем приложении. Если нескольким дочерним компонентам нужно что-то из локального состояния, вы можете передать данные из состояния вниз в качестве опоры:
Все данные в React текут вниз. Пример на диаграмме очень упрощен. Однако приложения React станут более сложными.
Будут случаи использования, когда ребенку также необходимо иметь собственное локальное состояние:
По мере того, как приложения становятся сложнее, вам придется отслеживать большее количество локальных состояний.
Бывают случаи, когда вы могли изначально настроить свое приложение для работы следующим образом:
Ребенок управляет местным государством.
Допустим, вам все еще нужно только одно состояние, но у родителя будет больше детей, чем вы изначально не планировали.
Вам придется переписать свой код, чтобы поднять местный штат на один уровень:
Redux предоставляет альтернативу обработке состояния. Он содержит все состояния в центральном расположении:
Любой из компонентов может получить доступ к состояниям и их данным. Redux также позволяет нам отслеживать, какой компонент к какому состоянию обращается и что они с ним сделали.
Если это все еще немного сбивает с толку, позвольте мне использовать аналогию.
Допустим, у настоящих родителей есть настоящие дети. Родитель хранит все свои деньги в виде наличных в комнате в своем доме. Детям нужны деньги, но они не могут обеспечить никакого дохода. Поэтому деньги всегда текут вниз. В качестве примера предположим, что автоматического отслеживания этого денежного потока не существует.
Допустим, один ребенок немного поумнел и решил скопить унаследованные деньги. Он также передает накопленные деньги для инвестирования в другие места.
Денежный поток для всей этой семьи становится слишком сложным, чтобы его можно было рассчитать вручную.
Эквивалентом Redux в этом сценарии было бы перемещение всех учетных записей в этом семействе в банк:
Каждому члену семьи был предоставлен доступ к кассиру и запросить обновление данных (чековых или сберегательных) на любом из счетов. У вас также будет квитанция от кассира обо всех транзакциях с указанием того, кто что делал и как в настоящее время выглядят счета.
Не заходите слишком далеко в кроличьей норе ни с одним из этих объяснений. Основная суть в том, что Redux - это альтернативный способ управления состояниями в приложении React, поскольку он перемещает состояния в отдельный контейнер.
Основные концепции
Терминологии
Необходимо понимать 3 основных терминологии:
- Магазин
- Действия
- Редукторы
Чтобы объяснить это, давайте сравним это с нашим примером банка, который является хорошей аналогией того, как работает Redux:
Вы идете в банк и запрашиваете обновление текущего счета в вашем личном кабинете. Зная эту информацию, кассир обновляет указанную учетную запись (ваш личный счет) и тип учетной записи (проверка). Затем кассир выдает вам квитанцию о том, сколько денег осталось на вашем личном счете.
В приложении React и Redux банк, в котором хранятся счета, эквивалентен магазину. Магазин содержит все состояния в приложении. Каждое состояние имеет свои собственные данные, к которым можно получить доступ.
В приложении будет два основных типа компонентов при реализации передовых методов: активные и статические. Активные компоненты выполняют работу по управлению данными в состоянии. Статические компоненты просто представляются с использованием унаследованных данных (свойств). Другими словами, активные компоненты заботятся о принципах работы, а статические компоненты заботятся о внешнем виде.
Примечание. Активные и статические компоненты - это моя собственная терминология. Однако в официальной документации они называются контейнерными и презентационными компонентами. Официальная терминология станет более понятной, когда мы перейдем к коду, поэтому пока я буду придерживаться своей специальной терминологии.
Например, предположим, что мы хотели отобразить эту карточку Twitter, содержащую информацию о моем профиле, в виде двух компонентов. Активный компонент перейдет в состояние и получит данные по имени пользователя Twitter. Все эти данные будут переданы статическому компоненту, который представляет последнюю карточку Twitter.
Активные компоненты будут запрашивать данные из состояний в хранилище и предоставлять данные статическим компонентам. Следовательно, мы можем называть активные компоненты поставщиками. Примечание. "Поставщики" - это не официальная терминология, но я считаю полезным ее использовать.
Возвращаясь к нашей аналогии с банком, провайдеры - это то же самое, что вы приходите в банк. Запрос, который вы делаете кассиру для обновления лицевого счета (т. Е. Отказа от проверки), эквивалентен действию. В Redux действия - это отправленные от поставщиков запросы на обновление состояния в хранилище.
Рисунок выше должен быть немного изменен, потому что есть посредники, которые слышат отправленные действия и обрабатывают их соответствующим образом.
Эти посредники называются редукторами. Редукторы прослушивают отправленные действия и выполняют определенное действие в указанном состоянии. Текущая информация о состоянии затем передается поставщикам.
Теперь одновременно может быть отправлено много действий. Название reducer происходит от того факта, что многие действия можно «свести» к одному новому состоянию.
Резюмируем:
- Магазины содержат все состояния в вашем приложении.
- Активные компоненты (которые я предпочитаю называть поставщики) запрашивают / отправляют действия, которые будут обрабатываться в указанном состоянии.
- Редукторы применяют запрошенное действие к указанному состоянию.
Принципы
В основе Redux лежат два основных принципа.
Первый принцип заключается в том, что есть только один способ обновить состояние - отправить событие.
Это означает, что провайдер должен отправить действие редуктору. Он не может сразу перейти к данным обновления магазина. Точно так же вы не можете пойти в банк и самостоятельно пополнить личный счет. Вы должны обратиться к кассиру.
Второй принцип заключается в том, что изменения вносятся с помощью чистых функций.
Технически даже редуктор не просто видоизменяет предыдущее состояние. Вместо этого он принимает предыдущее состояние, применяет действие и возвращает новое состояние.
Управление состоянием в React без Redux следует тому же шаблону. Вы не просто делаете this.state.color = "blue". Вам нужно сделать this.setState({color: "blue"}) для простого обновления. Или, для обновления, которое требует информации о предыдущем состоянии, вы должны:
this.setState((prevState) => {
return {counter: prevState.counter + 1};
});
В примерах React без Redux мы используем API setState. Библиотека React делает тяжелую работу. После реализации Redux мы напишем наши собственные чистые функции вместо API setState.
Заключительные мысли
Я намеренно хотел объяснить основные концепции Redux, не глядя на код Redux. В результате вы понимаете концепции на концептуальном уровне вместо того, чтобы смотреть на код и думать: «Это действительно выглядит устрашающе!»
В следующей главе мы возьмем эти основные концепции и вместе выполним несколько небольших фрагментов кода. Мы оставим настройку сборки «за кулисами» и сосредоточимся только на ознакомлении с кодом Redux. Мы запрограммируем это на ванильном JS, прежде чем переходить к реализации с React в главе 3.
Еще одна вещь. Имейте в виду, что я пишу это, пока учусь. Не стесняйтесь оставлять комментарии или личные заметки :)
Ресурсы
Официальная документация Redux
Презентационные и контейнерные компоненты от Дэна Абрамова
Глава 2
Купить официальную электронную книгу
Если вы хотите поддержать автора и получить копию книги в формате PDF, EPUB и / или MOBI, пожалуйста, купите официальную электронную книгу.
Ура,
Майк Мангиаларди
