Пошаговый шаг: как добавить Thunk Redux в свой проект React & Redux

Автор оригинала: Rajjeet Phull.

Не было времени? Клонировать репо и пойти!

git clone https://github.com/rajjeet/react-playbook
cd react-playbook/packages/redux-thunk
npm install
npm start

Быстрая установка

Оформить заказ моих предыдущих статей для кода установки:

• Реагировать |. Блог |. Гадость

  • React-redux | Блог |. Гадость

    • Redux-Thunk |. Гадость

Веселый факт

Thunk – это прошедшее время считать

Redux Thunk помогает ввести асинхронное поведение вашего redux Действия, такие как вызовы API.

Шаг 1. Установите Redux-Thunk

npm install redux-thunk

Шаг 2. Примените Redux-Thunk для промежуточного программного обеспечения Redux

/src/configure-store.js.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
...
export const store = createStore(countReducer, applyMiddleware(thunk));

Шаг 3. Функция отправки вместо объекта

Без Redux-Thunk Мы разрешаем отправлять объекты с Тип имущество. С помощью этого промежуточного программного обеспечения мы можем вернуть функции. В рамках функций мы можем выполнять async Calls (i.e. API вызовы) до или после того, как мы отправляем действия.

SRC/Counter/Container.js

const mapDispatchToProps = dispatch => {
  return {
    handleIncrementClick: () => dispatch(      
      innerDispatch => innerDispatch({ type: 'INCREMENT' })      
    ),
    handleDecrementClick: () => dispatch({ type: 'DECREMENT' })
  }
};

Обратите внимание, как я изменил ДеревянныйКрементКик это ранее возвращалось только простой объект.

SRC/Counter/Container.js (до)

  ...
    handleIncrementClick: () => dispatch({ type: 'INCREMENT' })
  ...

Сравните это с ОбрабатываетecrementClick и увидеть разницу.

Замечания

• Код в Контейнер выглядит уродливо. Вы должны ревертировать все действия в отдельный файл, специфичный для этого контейнера ( Actions.js ). Функции могут жить где угодно.

  SRC/Counter/Actions.js

  SRC/Counter/Container.js

• Здесь не было сделано никакого асинхронного звонка, чтобы оставаться честным для названия, но вы можете легко добавить ASYNC код до или после диспетчера. Вы можете Orchestrate UI, чтобы показать загрузку и завершенные состояния. Каждая отправка будет обновлять UI, чтобы отразить состояние асинхронизации.

• Я сделал эту статью чрезвычайно простым, чтобы показать основной эффект, представленный Thunk Отказ Для более подробного примера см. Документация Отказ