redux副作用处理之redux-thunk使用

yarn add redux-thunk
// 或
npm install --save redux-thunk

import { createStore, applyMiddleware } from "redux";
import * as loginActions from "./action/login";
import reducer from "./reducer";
import logger from "redux-logger";
import thunk from "redux-thunk";

// 创建仓库
const store = applyMiddleware(thunk, logger)(createStore)(reducer);

export function setTime(payload) {
  return function () {
    setTimeout(() => {
      console.log("定时器");
    }, 1000);
  };
}

import { createStore, applyMiddleware } from "redux";
import * as loginActions from "./action/login";
import reducer from "./reducer";
import logger from "redux-logger";
import thunk from "redux-thunk";

// 创建仓库
const store = applyMiddleware(logger)(createStore)(reducer);
store.dispatch(loginActions.setTime());

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    // 如果当前的action是一个函数直接调用该函数
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    // 如果当前的action是一个平面对象，传递个下一个中间件
    return next(action);
  };
}

const thunk = createThunkMiddleware();
// 可以使用withExtraArgument传入一个参数
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;