通过源码理解thunk运行原理

通过源码理解thunk运行原理

1. 需要提前知道的知识

​ 1）函数的柯里化（函数返回函数返回函数·····）其实是一个在连缀调用时不停收集变量和数据的过程，同时使用闭包将收集到的变量进行保存。这么做可以使函数由复杂的多入单出变成简单的单入单出的状态，同时也可以做到将参数进行复用和函数延迟执行的功能

​ 2） redux的中间件的位置，位于数据传入redux后，redux执行反应变更（dispatch）之前，数据要穿过中间件才能真正进入并执行redux相关操作

2.thunk源码

function createThunkMiddleware(extraArgument) {
    // 第一层函数，用于从redux源码中收集dispatch和getState方法
    // 第二层函数，用于从redux源码中收集自动注入的next
    // 第三层函数，截获外部传入的带有异步操作的函数，一直到外部函数返回的是一个符合规则的对象
  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;

3.redux源码中createStore的dispatch方法部分源码

function dispatch(action) {
    // 这里的isPlainObject()函数是自定义的检测输入参数是否符合规则的函数
    // 如果输入的不是符合规则的对象就报错
    if (!isPlainObject(action)) {
      throw new Error('Actions must be plain objects. ' + 'Use custom middleware for async actions.');
    }
    ····
}

4. 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 _objectSpread2({}, store, {
        dispatch: _dispatch
      });
    };
  };
}

5. 结论

​ 知道了上面的所有之后，结论已经出来了，thunk是一个将异步操作（如数据请求等）从react组件中转移到中间件中执行的redux中间件，可以将组件的代码变得更简洁单纯（因为将复杂的异步请求数据交给了中间件执行，可以让组件专注于页面的各种操作而不必分心去考虑数据来源的事）

​ 在注册了中间件（applyMiddleware）后，中间件就会被插入redux内部操作之前，react组件数据发送给redux之后，如果这时候外部传入（dispatch）了一个包含有异步操作的函数，不管这个函数柯里化了几次，只要返回的还是函数，都会被thunk所截获并在thunk中执行，一直到最后异步操作完成，获取并传入（dispatch）了一个符合要求的非函数数据，thunk才会放行，这时候这个异步操作所获取到的数据才会真正进入到redux中执行redux的操作（当然，redux的dispatch方法还会检测数据格式是否正确，如果不正确还是会报错的）