一分钟学会在 Redux 中使用 redux-thunk 进行异步操作

本文主要介绍了在 Redux 中使用 redux-thunk 进行异步操作。

如果对 Redux 尚不熟悉，建议先看我的上一篇博客：Redux 基础教程以及结合 React 使用方式。

最下方贴上了 applyMiddleware 和 redux-thunk 的实现源码，有兴趣的同学可以看一看。只能用两个字来形容：优秀。

在项目中引入

• 安装插件

  $ npm install redux-thunk -S;
  复制代码

  注意： 使用 commonJs 方式引入时要注意，这样引入才可以正常使用：const thunk = require('redux-thunk').default

• 在创建 store 时引入 redux-thunk

  import { createStore, applyMiddleware } from 'redux';
  import thunk from 'redux-thunk';
  
  // 创建 store
  // applyMiddleware，在 Redux 中使用中间件时，就需要使用 applyMiddleware() 这个函数进行包裹
  const store = createStore(reducer, applyMiddleware(thunk));
  复制代码

• 在 action 中的书写方式

  // 异步请求成功会用到的同步 action 创建函数
  function actionSuccess(msg) {
      return {
          type: 'SUCCESS',
          message: msg
      }
  }
  
  // 异步请求失败会用到的同步 action 创建函数
  function actionError() {
      return {
          type: 'ERROR'
      }
  }
  
  // 暴露出异步 Action
  export function asyncAction(param) {
      // 异步 action 的固定写法，返回一个函数，第一个参数为 dispatch 函数，第二个参数为 state
      return (dispatch, state) => {
          // 执行异步操作
          fetch(url)
              .then(reponse => response.json)
              // 请求成功调用成功的同步 Action
              .then(json => dispatch(actionSuccess(actionSuccess)))
              .catch(error => dispatch(actionError()))
      }
  }
  复制代码

• 在组件中调用

  • 在组件中和调用同步 Action 一致

  store.dispatch(asyncAction(param));
  复制代码

• 在 Reducer 中不需要处理异步 Action，还是只关注同步 Action 即可。因为异步 Action 结束之后还是会调用同步 Action 发送数据更新指令

实现原理

本文只是单纯的记录一下 redux-thunk 中间件如何进行使用，想要深入了解 applyMiddleware 中间件和 redux-thunk 实现原理的朋友可以移步至阮老师的

Redux 入门教程（二）：中间件与异步操作

applyMiddleware 源码

function applyMiddleware() {
  for (var _len = arguments.length, middlewares = new Array(_len), _key = 0; _key < _len; _key++) {
    middlewares[_key] = arguments[_key];
  }

  return function (createStore) {
    return function () {
      var store = createStore.apply(void 0, arguments);

      var _dispatch = function dispatch() {
        throw new Error("Dispatching while constructing your middleware is not allowed. " + "Other middleware would not be applied to this dispatch.");
      };

      var middlewareAPI = {
        getState: store.getState,
        dispatch: function dispatch() {
          return _dispatch.apply(void 0, arguments);
        }
      };
      var chain = middlewares.map(function (middleware) {
        return middleware(middlewareAPI);
      });
      _dispatch = compose.apply(void 0, chain)(store.dispatch);
      return _objectSpread({}, store, {
        dispatch: _dispatch
      });
    };
  };
}
复制代码

redux-thunk 源码

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;
复制代码