redux-applyMiddleware

redux 中的middleware思想还是很巧妙地，先来看下怎么使用

export default function createStore(initialState = {}) {
  const middleware = [thunkMiddleware, promiseMiddleware, messageMiddleware];
  let finalCreateStore;
  finalCreateStore = applyMiddleware(...middleware)(_createStore);
  const store = finalCreateStore(reducer, initialState);
  return store;
}

就是将middleware 使用applymiddleware函数包装一下，再将store传递过去即可，使用起来很简单，那么关键就是这个applymiddleware函数了，这个函数式redux提供的，先来看下源码：

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    const store = createStore(reducer, preloadedState, enhancer)
    let dispatch = store.dispatch
    let chain = []

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    }

    // 依次调用传进来的middleware 并且调用middleware  传入 middlewareAPI
    chain = middlewares.map(middleware => middleware(middlewareAPI))

    //依次调用传入了middlewareAPI 的 middleware集合 再传入一个dispatch 再返回
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}


export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

可能上面有注释这两句看起来有点晕， 其实多看几次就明白了。这里用了componse函数，在下面也有给出。
applymiddleware函数我们看完了， 那么middleware我们怎么来写呢？这里给出一个例子，就是著名的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;

这里面有连续三个=> 看起来更晕了。哈哈。可以分布来看下

image.png

applymiddleware中这里面我们调用了middleware 并且传入了middlewareAPI 看是不是就是{ dispatch, getState}这个参数。

image.png

而这里我们又调用了一次，并且传递了store.dispatch。实际上就是这里的next参数。这个匿名函数参数是next，即传递过来的store.dispatch。返回了一个函数，参数为action,返回的这个函数即一个store.dispatch。然后我们可以通过根据这个action类型来判断该怎么处理。

函数很简单，设计很精妙。读源码确实能学习到很多知识。