redux-thunk 源码

刚学redux的时候接触过中间件 redux-thunk 当时只知道可以在 action 中操作异步请求.

直到最近面试的时候被问：redux-thunk 是如何实现异步.

如何实现.. 肯定要看源码啊

GitHub 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;

啊..这..

可以看到总的代码行数只有 14 行，redux-thunk 主要的功能就是可以让我们dispatch一个函数，而不只是普通的 Object

它的核心代码其实只有两行，就是判断每个经过它的action：如果是function类型，就调用这个function（并传入 dispatch 和 getState 及 extraArgument 为参数），而不是任由让它到达 reducer，因为 reducer 是个纯函数，Redux 规定到达 reducer 的 action 必须是一个 plain object 类型。