Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Начало работы с Redux: подключение Redux к React

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

Это третья часть серии статей о начале работы с Redux, и в этом уроке мы узнаем, как подключить хранилище Redux к React. Redux - это независимая библиотека, которая работает со всеми популярными интерфейсными библиотеками и фреймворками. И это работает безупречно с React из-за его функционального подхода.

Вам не нужно следовать предыдущим частям этой серии, чтобы этот урок имел смысл. Если вы хотите узнать, как использовать React с Redux, вы можете воспользоваться кратким обзором, приведенным ниже, а затем взять код из предыдущей части и начать с него.

Быстрый обзор

В первом посте мы узнали о рабочем процессе Redux и ответили на вопрос, зачем нужен Redux?. Мы создали очень простое демонстрационное приложение и показали, как связаны различные компоненты Redux - действия, редукторы и хранилище.

В предыдущем посте мы начали создавать приложение со списком контактов, которое позволяет добавлять контакты, а затем отображать их в виде списка. Для нашего списка контактов был создан store Redux, и мы добавили несколько редукторов и действий. Мы попытались отправить действия и получить новое состояние, используя методы store, такие как store.dispatch() и store.getState().

К концу этой статьи вы узнаете

  1. какая разница между контейнерными компонентами и презентационными компонентами
  2. о библиотеке react-redux
  3. Как связать react и redux с помощью connect()
  4. как отправлять действия, используя mapDispatchToProps
  5. как получить состояние, используя mapStateToProps

Код для учебника доступен на GitHub в react-redux-demo. Возьмите код из ветки v2 и используйте его в качестве отправной точки для этого урока. Если вам интересно узнать, как приложение выглядит к концу этого урока, попробуйте ветку v3. Давайте начнем.

Проектирование иерархии компонентов: умный компонент против тупого

Это концепция, о которой вы, вероятно, слышали раньше. Но давайте кратко рассмотрим разницу между умными и глупыми компонентами. Напомним, что мы создали два отдельных каталога для компонентов, один из которых назвал containers/, а другой components/. Преимущество этого подхода заключается в том, что логика поведения отделена от представления.

Говорят, что компоненты представления глупы, потому что они обеспокоены тем, как все выглядит. Они отделены от бизнес-логики приложения и получают данные и обратные вызовы от родительского компонента исключительно через props. Им все равно, подключено ли ваше приложение к хранилищу Redux, если данные поступают из локального состояния родительского компонента.

Компоненты контейнера, с другой стороны, имеют дело с поведенческой частью и должны содержать очень ограниченную разметку и стиль DOM. Они передают данные, которые должны быть обработаны, для глупых компонентов в качестве props.

Я подробно рассмотрел эту тему в другом учебном пособии «Компоненты с состоянием и без состояния в React».

Двигаясь дальше, давайте посмотрим, как мы собираемся организовать наши компоненты.

Designing component Hierarchy

Презентационные компоненты

Вот презентационные компоненты, которые мы будем использовать в этом уроке.

components/AddContactForm.jsx

Это HTML-форма для добавления нового контакта. Компонент получает обратные вызовы onInputChange и onFormSubmit в качестве props. Событие onInputChange запускается при изменении входного значения и onFormSubmit при отправке формы.

components/ContactList.jsx

Этот компонент получает массив контактных объектов в качестве props и, следовательно, имя ContactList. Мы используем метод Array.map(), чтобы извлечь отдельные контактные данные, а затем передать эти данные в <ContactCard/>.

components/ContactCard.jsx

Этот компонент получает объект контакта и отображает имя и изображение контакта. Для практических приложений может иметь смысл размещать изображения JavaScript в облаке.

Компоненты контейнера

Мы также собираемся создать компоненты контейнера barebones.

containers/Contacts.jsx

Функция returnContactList() извлекает массив объектов контактов и передает его компоненту ContactList. Поскольку returnContactList() извлекает данные из хранилища, мы пока оставим эту логику пустой.

containers/AddContacts.jsx

Мы создали три метода-обработчика, которые соответствуют трем действиям. Все они отправляют действия для обновления состояния. В методе рендеринга мы исключили логику для отображения/скрытия формы, потому что нам нужно получить состояние.

Теперь давайте посмотрим, как связать react и redux вместе

Библиотека react-redux

Привязки React по умолчанию недоступны в Redux. Сначала вам нужно будет установить дополнительную библиотеку react-redux.

Библиотека экспортирует только два API, которые вам нужно запомнить, компонент <Provider/> и функцию более высокого порядка, известную как connect().

Компонент провайдера

Такие библиотеки, как Redux, должны сделать доступными данные хранилища для всего дерева компонентов React, начиная с корневого компонента. Шаблон Provider позволяет библиотеке передавать данные сверху вниз. Приведенный ниже код демонстрирует, как поставщик волшебным образом добавляет состояние ко всем компонентам в дереве компонентов.

Демонстрационный код

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

Метод connect()

Теперь, когда мы предоставили хранилище нашему приложению, нам нужно подключить React к нему. Единственный способ связаться с хранилищем - отправлять действия и получать данные о состоянии. Ранее мы использовали store.dispatch() для отправки действий и store.getState() для получения последнего снимка состояния. Функция connect() позволяет вам сделать это, но с помощью двух методов, известных как mapDispatchToProps и mapStateToProps. Я продемонстрировал эту концепцию в следующем примере:

Демонстрационный код

mapStateToProps и mapDispatchToProps оба возвращают объект, и ключ этого объекта становится prop подключенного компонента. Например, state.contacts.newContact сопоставляется с props.newContact. Создатель действия addContact() сопоставлен с props.addContact.

Но чтобы это работало, вам нужна последняя строка в фрагменте кода выше.

Вместо того, чтобы экспортировать компонент AddContact напрямую, мы экспортируем связанный компонент. Соединение предоставляет addContact и newContact в качестве реквизита для компонента <AddContact/>.

Как соединить React и Redux?

Далее мы рассмотрим шаги, которые необходимо выполнить для подключения React и Redux.

Установка библиотеки react-redux

Установите библиотеку react-redux, если вы еще этого не сделали. Вы можете использовать NPM или yarn, чтобы установить ее.

Предоставьте хранилище вашему компоненту приложения

Сначала создайте хранилище. Затем сделайте объект хранилища доступным для вашего дерева компонентов, передав его в качестве prop <Provider/>.

index.js

Подключите контейнеры React к Redux

Функция connect используется для привязки контейнера React к Redux. Это означает, что вы можете использовать функцию connect для:

  1. того чтобы подписаться на хранилище и сопоставить его состояние с вашими props
  2. действия по отправке и сопоставление обратных вызовов в ваши props

После подключения вашего приложения к Redux вы можете использовать this.props для доступа к текущему состоянию, а также для отправки действий. Я собираюсь продемонстрировать процесс на компоненте AddContact. AddContact должен отправить три действия и получить состояние двух свойств из хранилища. Давайте посмотрим на код.

Сначала импортируйте connect в AddContact.jsx.

Во-вторых, создайте два метода mapStateToProps и mapDispatchToProps.

mapStateToProps получает состояние хранилища в качестве аргумента. Он возвращает объект, который описывает, как состояние магазина отображается в ваших реквизитах. mapDispatchToProps возвращает похожий объект, который описывает, как действия по отправке отображаются на ваши реквизиты.

Наконец, мы используем connect для связывания компонента AddContact с двумя функциями следующим образом:

Обновите компоненты контейнера для использования реквизита

Теперь реквизиты компонента оборудованы для чтения состояния из хранилища и отправки действий. Логика для handleInputChange, handleSubmit и showAddContactBox должна быть обновлена следующим образом:

Мы определили методы обработчика. Но все еще отсутствует одна часть - условный оператор внутри функции render.

Если isHidden имеет значение false, форма отображается. В противном случае отображается кнопка.

Отображение контактов

Мы завершили самую сложную часть. Теперь осталось только отобразить эти контакты в виде списка. Контейнер Contacts - лучшее место для этой логики.

Мы прошли ту же процедуру, что и выше, чтобы соединить компонент Contacts с хранилищем Redux. Функция mapStateToProps сопоставляет объект хранилища с props contactList. Затем мы используем connect для привязки значения prop к компоненту Contact. Второй аргумент для подключения является нулевым, потому что у нас нет никаких действий для отправки. Это завершает интеграцию нашего приложения с состоянием хранилища Redux.

Что дальше?

В следующем посте мы более подробно рассмотрим middleware и начнем рассылать действия, связанные с извлечением данных с сервера. Поделитесь своими мыслями в комментариях!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.