1. Установите то, что необходимо

npm i redux react-redux redux-thunk -S

2. Маршрутизатор, промежуточное ПО

Redux нужен магазин. Поскольку мы будем использовать промежуточное ПО (подробнее об этом позже), а именно redux-thunk, нам нужно создать хранилище с использованием указанного промежуточного ПО.

Как только хранилище создано, ему нужен глобальный объект редуктора состояния. Объект Provider позволяет смешивать эти вещи с react-router.

3. Редуктор и корневой редуктор

Корневой редуктор можно рассматривать как отличное глобальное общее состояние приложения Redux-React. К одному и тому же объекту, к каждому его полю, могут обращаться несколько компонентов.

Вот как выглядит IssuesReducer. Единственное, что он делает, это возвращает новое значение состояния при отправке конкретного действия.

Это будет иметь больше смысла, когда мы будем обсуждать действия и создателей действий.

4. Создатели действий и действия

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

Все редукторы будут уведомлены об отправке этого действия, но изменится только тот, который прослушивает («тот, который фильтрует по правильному оператору switch-case»). их поле в большом общем состоянии («редьюсер обновляет свое состояние») с полезной нагрузкой действия.

Помните redux-thunk? Хотя он нигде явно не используется, тот факт, что мы объявляем его как наше промежуточное ПО, позволяет нам писать создателей действий, которые отправляют действия (создатели возвращают функции), чего в vanilla Redux нет. позволил. Vanilla Redux позволяет создателю действия только возвращать действия, ничего особенного, вроде запросов ответов или обещаний. Другое промежуточное ПО, такое как redux-promise, позволяет нам возвращать промисы вместо функций.

Таким образом, в конце цикла ваш компонент получит обновленное состояние через реквизит. ¿Как это делается?

5. Смарт-компонент (Контейнер)

Здесь показаны только важные части смарт-компонента.

Строки 11–15: связывает одно или несколько полей состояния приложения с реквизитами этого компонента. Перейдите к шагу 3 и посмотрите на поля корневого редуктора, это то, что мы здесь ограничиваем. Этот массив будет доступен для этого компонента в this.props.issues с момента его установки.
Если вы хотите добавить дополнительные поля, просто добавьте их следующим образом.

return {
  issues: state.issues,
  things: state.things
}

Но помните, что вы должны добавить новый редьюсер для этого поля, если его еще нет. Это всегда один редьюсер на поле состояния.

Строки 17–21: точно так же, как мы привязывали состояние к реквизитам, здесь мы привязывали действия к реквизитам. Перейдите к шагу 4, эта функция (импортированная здесь в строке 5) ограничивается здесь. Теперь это позволяет компоненту вызывать создателя действия с помощью this.props.getIssues(). Это инициирует запрос, затем отправит действие, редюсер обновит состояние с полезной нагрузкой, и новое состояние будет доступно в this.props.issues.

Строки 25 фактически выполняют ограничение, обсуждавшееся ранее, соединяя компонент React с состоянием Redux.

TODO Включить константы вместо строковых типов действий.