redux-thunk

一、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），防止其他的中间件中返回异步请求。