redux中間件原理

jollywing 發(fā)布于2019-08-22 15:45 / 2424人閱讀

摘要：中的是實際的調(diào)用順序是和傳入中間件順序相反的實際的執(zhí)行是次序是。這個返回的函數(shù)是中倒數(shù)第二個函數(shù)的參數(shù)，也就是參數(shù)源碼參考

中間件執(zhí)行順序

應(yīng)用了如下的中間件: [A, B, C]，

整個執(zhí)行 action 的過程為 A -> B -> C -> dispatch -> C -> B -> A

==經(jīng)過applyMiddleware方法后的dispatch方法是類似下面，某處調(diào)用store.dispatch則傳入action, 然后按洋蔥模型來執(zhí)行==

(action) => {
    //...
    next(action)
    //...
}

==最右側(cè)的 next(action)返回的是應(yīng)用傳入的action==, 該行為是由redux createStore源碼中dispatch方法返回值決定的，不過一般都會 return next(action),

前面的中間件的next(action)的值都是后一個中間件的返回值

小例子

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

    console.log(`middleware1 before next action `)
    console.log(next)
    next(action)
    console.log(`middleware1 after next action `)
}
const middleware2 = ({getState, dispatch}) => next => action => {

    console.log(`middleware2 before next action `)
    console.log(next)
    next(action)
    console.log(`middleware2 after next action `)
}
const middleware3 = ({getState, dispatch}) => next => action => {

    console.log(`middleware3 before next action `)
    console.log(next)
    next(action)
    console.log(`middleware3 after next action `)
}



const sagaMiddleware = createSagaMiddleware()
const store = createStore(reducer, applyMiddleware(middleware1, middleware2, middleware3))

被中間件包裝過的dispatch方法

是類似于func1(func2(store.dispatch))這種形式的函數(shù)

==next方法其實是此中間件右邊中間件的這個方法，你要給它傳action。==

(action) => {
    //func2中的next是store.dispatch
    next(action);
}

==實際的調(diào)用順序是和傳入中間件順序相反的==

let store = applyMiddleware(Middleware1,Middleware2,Middleware3)(createStore)(rootReducer);

實際的執(zhí)行是次序是store.dispatch->Middleware3->Middleware2->Middleware1。

middlewareAPI中的dispatch被普通函數(shù)包裝了一下

var middlewareAPI = {

getState: store.getState,
dispatch: (action) => dispatch(action)

};

并沒有直接使用dispatch:dispatch，而是使用了dispatch:(action) => dispatch(action)，其目的是==如果使用了dispatch:dispatch，那么在所有的Middleware中實際都引用的同一個dispatch(閉包)，如果存在一個中間件修改了dispatch，就會導(dǎo)致后面一下一系列的問題==，但是如果使用dispatch: (action) => dispatch(action)就可以避免這個問題。

compose源碼

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

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

  const last = funcs[funcs.length - 1]
  const rest = funcs.slice(0, -1)
  return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
}

applyMiddleware 源碼

這里chain是函數(shù)數(shù)組。然后執(zhí)行compose(...chain)(store.dispatch)。
chain數(shù)組的最后一個函數(shù)接收store.dispatch函數(shù)做為參數(shù)，還是返回一個函數(shù)，接收action作為參數(shù)。這個返回的函數(shù)是chain中倒數(shù)第二個函數(shù)的參數(shù)，也就是參數(shù)next

[
    next => action => {
        
        return next(action)
    }
]

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

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

    return {
      ...store,
      dispatch
    }
  }
}

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;

參考

https://github.com/MrErHu/blo...

https://zhuanlan.zhihu.com/p/...