一、redux-thunk 是什么

咱们晓得，异步调用什么时候返回前端是无法控制的。对于 redux 这条紧密的数据流来说，如何能力做到异步呢？redux-thunk 的根本思维就是通过函数来封装异步申请，也就是说在 actionCreator 中返回一个函数，在这个函数中进行异步调用。咱们都晓得，redux 中间件只关注 dispatch 函数的传递，而且 redux 也不关怀 dispatch 函数的返回值，所以只须要让 redux 意识这个函数就能够了。

二、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;

乍一看，这不就是一个 middleware 吗？没错，redux-thunk 就是一个 middleware，惟一一点就是对 action 做了一下如下的判断：

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

也就是说，如果发现 actionCreator 传过来的 action 是一个函数的话，会执行一下这个函数，并以这个函数的返回值作为返回值。后面曾经说过，redux 对 dispatch 函数的返回值不是很关怀，因而此处也就无所谓了。

这样的话，在咱们的 actionCreator 中，咱们就能够做任何的异步调用了，并且返回任何值也无所谓，所以咱们能够这样调用 promise 了：

function actionCreate() {
  // 返回的是一个函数
  return function (dispatch, getState) {
    // 返回的函数体内自在实现。。。fetch({xxx}).then(function (json) {dispatch(json);
    })
  }
}

通过 redux-thunk，咱们将异步的操作交融进了现有的数据流中。

最初还要留神一点，因为 中间件只关怀 dispatch 的传递，并不限度你做其余的事件，因而咱们最好将 redux-thunk 放到中间件列表的首位 （也就是 compose 参数中的第一个，就是最初解决 dispatch）， 避免其余的中间件中返回异步申请。