一、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），避免其余的中间件中返回异步申请。