Redux中Middleware原理

Redux中Middleware原理

下面以redux-trunk为示例了解applyMiddleware用于干什么。

redux-thunk/src/index.js

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;

首先由上面代码可以看出trunk是一个({ dispatch, getState }) =>{}这样的箭头函数。

当 applyMiddleware(trunk)执行后，：

redux/src/applyMiddleware.js

export default function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    const store = createStore(...args)
    let dispatch = () => {
      throw new Error(
        `