【redux篇】middleware 之 redux-thunk

【redux篇】middleware 之 redux-thunk

之前每件事都差不多，直到现在才发现差很多。

现在才发现理清一件事的原委是多么快乐的一件事，我们共同勉励。

懒得扯淡，直接正题

不基于例子的讲原理都是扯淡，知乎一样的举例都是卖弄

redux-thunk 函数签名

middleware 接受 Store 的 dispatch 和 getState 函数作为命名参数，并返回一个函数。该函数会被传入 被称为 next 的下一个 middleware 的 dispatch 方法，并返回一个接收 action 的新函数，这个函数可以直接调用 next(action)，或者在其他需要的时刻调用，甚至根本不去调用它。调用链中最后一个 middleware 会接受真实的 store 的 dispatch 方法作为 next 参数，并借此结束调用链。

({ getState, dispatch }) => next => action

在写redux时，经常会使用中间件 redux-thunk 和 redux-promise 等，在使用 redux-thunk 时，经常对 dispatch 一个函数很有疑问，action 返回的函数中的参数 dispatch 和 getState 是怎么传递进来的。

源码分析

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;

从上面的源码可以看到在函数内部：

• 如果 action 是一个函数，则调用 dispatch 的 action 函数，传递 dispatch 和 getState；
• 如果 action 是一个对象，直接调用 dispatch action。

由此可见 redux-thunk 既可以处理函数也可以处理对象。

引用

redux中文文档