redux---redux-thunk：异步action插件（解决redux里的action中复杂的数据类型，也就是解决异步处理的）

redux里所有的action都必须是一个简单地数据类型
比较复杂的话，就需要借助一个插件 redux-thunk
这个插件是用来解决异步处理的
安装： npm i redux-thunk
redux-thunk是redux里最知名的插件

承接前几篇文章的代码描述

/store/index.js

import { createStore, compose, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";

// 使用了redux-thunk插件之后可以返回一个function作为dispatch的参数
//  作用：判断当前action是什么
//    如果是一个function那么会自动的把dispatch当参数传递到function内部
//    否则直接dispatch

const store = createStore(
  rootReducer,
  // compose 类似于把多个插件合并成一个
  // applyMiddleware允许使用这个中间件
  compose(
    applyMiddleware(...[thunk]),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
); // 创建一个store

export default store;

/store/actions/counter.js

export function addAction(step) {
  return {
    type: "ADD",
    payload: {
      step,
    },
  };
}

export const reduceAction = (step) => ({
  type: "REDUCE",
  payload: {
    step,
  },
});

// 使用了redux-thunk插件之后可以返回一个function作为dispatch的参数
//  作用：判断当前action是什么
//    如果是一个function那么会自动的把dispatch当参数传递到function内部
//    否则直接dispatch

/* export function asyncAdd(step) {
  return function (dispatch) {
    setTimeout(function () {
      dispatch({
        type: "ADD",
        payload: {
          step,
        },
      });
    }, 1000);
  };
} */

// 另一种写法
export const asyncAdd = (step) => (dispatch) => {
  setTimeout(() => {
    dispatch({
      type: "ADD",
      payload: {
        step,
      },
    });
  }, 1000);
};