✨react中关于redux和thunk的一些知识

1.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;

2.redux源码中createStore的dispatch方法一些源码

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

3.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
      });
    };
  };
}

4. 结论
   知道了上面的所有之后，结论已经出来了，thunk是一个将异步操作（如数据请求等）从react组件中转移到中间件中执行的redux中间件，可以将组件的代码变得更简洁单纯（因为将复杂的异步请求数据交给了中间件执行，可以让组件专注于页面的各种操作而不必分心去考虑数据来源的事）
   在注册了中间件（applyMiddleware）后，这时候外部传入（dispatch）了一个包含有异步操作的函数，都会被thunk所截获并在thunk中执行，一直到最后异步操作完成，如果外部传入（dispatch）不是一个非异步操作的函数，thunk会放行.
   这也是我在文档中看的一些知识,分享出来给大家一起看,一起学习react相关的知识