了解一下Array的reduce函數(shù)就好理解了

我恰好看過redux源碼，順手答了，redux要結(jié)合redux-thunk 和 applyMiddleWare看。

// redux-thunk.js
({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

// applyMiddleWare.js
const chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(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)))
}

這個(gè)貨需要結(jié)合redux-thunk看
redux-thunk經(jīng)過middleWare(middleWareApi)后返回的是const a = next => action => { return next(action) }
假設(shè)還有其他中間件， 其他中間件的函數(shù)也是 const b = next => action => next(action)
你自己算一算 b(a) 的效果就是compose的效果。

第一個(gè)中間件的next是store.dispatch， 第二個(gè)的next是第一個(gè)函數(shù)返回的結(jié)果作為next，中間間中的dispatch是中間間都執(zhí)行完畢后的 action => next(action)。

compose函數(shù)是有一點(diǎn)抽象，你可以自己寫一個(gè)中間件試一試來理解

export default ({ log = false, namespace }) => {
    if (typeof namespace !== 'string') throw new Error('options.namespace must be given.');
    return ({ dispatch, getState }) => next => action => {
        // state 還未發(fā)生變化
        const _r = next(action); // dispatch 觸發(fā)reducer 和 subscription
        // state已經(jīng)發(fā)生變化
        const state = getState();
        if (log) console.log(state);
        sessionStorage.setItem(namespace, JSON.stringify(state));
        return _r; // 其實(shí)這個(gè)不重要 返回的是action
    }
}

沒有看過redux源碼,不過看得懂這個(gè)compose函數(shù)，現(xiàn)在來說說：

首先 compose 傳入的是一串不確定個(gè)數(shù)的function 作為參數(shù)，參數(shù)個(gè)數(shù)大于或者等于2，其實(shí)執(zhí)行過程的是調(diào)用一串function隊(duì)列，從右向左調(diào)用，從執(zhí)行compose方法來說明：

compose(fn1 ,fn2, fn3, ...fn[n-2],fn[n-1],fnn)(...args) ;   

上面的執(zhí)行過程等價(jià)于：

 
 fn1(fn2(......(fn[n-2](fn[n-1](fnn(...args))))))

再說的清楚點(diǎn)就是：

 compose(a,b,c,d)(...args) = a(b(c(d(...args))))

樓主去看看Array的原生方法reduce 和 reduceRight,就很快能理解了。

今天去看了一下redux源碼，發(fā)現(xiàn)寫法已經(jīng)變了，最后一步變成了

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

其實(shí)執(zhí)行過程還是跟上面的一樣，只是寫法不同而已