边黎安 reactnataive 0.60 react 最深最全的react 的原理探究 死磕源码

1 redvx 的中间件的原理是什么?

改装dispactch  派发action -》（中间件(redvx-thunk (转化成fun))（store.dispatch）） store =》reducer 

redvx-thunk（源码）

redux-thunk的源码非常简洁，出去空格一共只有11行，这11行中如果不算上},则只有8行。最后三行模块的导出方法很好理解，

// thunk的内容如下
({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  }

// thunk.withExtraArgument的结果如下
function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  };
}
thunk.withExtraArgument允许给返回的函数传入额外的参数，它比较难理解的部分和thunk一样，如下：

({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  }
看来，要解开dispatch,getState,next,action从哪里来，我们还需要再看看applyMiddleware的源码，如下：

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

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)