1. 前言
你好，我是若川。這是學習原始碼整體架構系列第八篇。整體架構這詞語好像有點大，姑且就算是原始碼整體結構吧，主要就是學習是程式碼整體結構，不深究其他不是主線的具體函式的實現。本篇文章學習的是實際倉庫的程式碼。要是有人說到怎麼讀原始碼，正在讀文章的你能推薦我的原始碼系列文章，那真是太好了。
學習原始碼整體架構系列文章如下：
1.學習 jQuery 原始碼整體架構，打造屬於自己的 js 類庫
2.學習 underscore 原始碼整體架構，打造屬於自己的函數語言程式設計類庫
3.學習 lodash 原始碼整體架構，打造屬於自己的函數語言程式設計類庫
4.學習 sentry 原始碼整體架構，打造屬於自己的前端異常監控SDK
5.學習 vuex 原始碼整體架構，打造屬於自己的狀態管理庫
6.學習 axios 原始碼整體架構，打造屬於自己的請求庫
7.學習 koa 原始碼的整體架構，淺析koa洋蔥模型原理和co原理
感興趣的讀者可以點選閱讀。
其他原始碼計劃中的有：express、vue-rotuer、redux、 react-redux 等原始碼，不知何時能寫完（哭泣），歡迎持續關注我（若川）。
原始碼類文章，一般閱讀量不高。已經有能力看懂的，自己就看了。不想看，不敢看的就不會去看原始碼。
所以我的文章，儘量寫得讓想看原始碼又不知道怎麼看的讀者能看懂。
閱讀本文你將學到：
git subtree管理子倉庫- 如何學習
redux原始碼redux中介軟體原理redux各個API的實現vuex和redux的對比- 等等
1.1 本文閱讀最佳方式
把我的redux原始碼倉庫 git clone https://github.com/lxchuan12/redux-analysis.git克隆下來，順便star一下我的redux原始碼學習倉庫^_^。跟著文章節奏除錯和示例程式碼除錯，用chrome動手除錯印象更加深刻。文章長段程式碼不用細看，可以除錯時再細看。看這類原始碼文章百遍，可能不如自己多除錯幾遍。也歡迎加我微信交流ruochuan12。
2. git subtree 管理子倉庫
寫了很多原始碼文章，vuex、axios、koa等都是使用新的倉庫克隆一份原始碼在自己倉庫中。
雖然電腦可以拉取最新程式碼，看到原作者的git資訊。但上傳到github後。讀者卻看不到原倉庫作者的git資訊了。於是我找到了git submodules 方案，但並不是很適合。再後來發現了git subtree。
簡單說下 npm package和git subtree的區別。npm package是單向的。git subtree則是雙向的。
具體可以檢視這篇文章@德來（原有贊大佬）：用 Git Subtree 在多個 Git 專案間雙向同步子專案，附簡明使用手冊
學會了git subtree後，我新建了redux-analysis專案後，把redux原始碼4.x（截止至2020年06月13日，4.x分支最新版本是4.0.5，master分支是ts，文章中暫不想讓一些不熟悉ts的讀者看不懂）分支克隆到了我的專案裡的一個子專案，得以保留git資訊。
對應命令則是：
git subtree add --prefix=redux https://github.com/reduxjs/redux.git 4.x3. 除錯 redux 原始碼準備工作
之前，我在知乎回答了一個問題若川：一年內的前端看不懂前端框架原始碼怎麼辦？
推薦了一些資料，閱讀量還不錯，大家有興趣可以看看。主要有四點：
1.藉助除錯
2.搜尋查閱相關高贊文章
3.把不懂的地方記錄下來，查閱相關文件
4.總結
看原始碼除錯很重要，所以我的每篇原始碼文章都詳細描述（也許有人看來是比較囉嗦...）如何除錯原始碼。
斷點除錯要領：
賦值語句可以一步按F10跳過，看返回值即可，後續詳細再看。
函式執行需要斷點按F11跟著看，也可以結合註釋和上下文倒推這個函式做了什麼。
有些不需要細看的，直接按F8走向下一個斷點
重新整理重新除錯按F5
除錯原始碼前，先簡單看看 redux 的工作流程，有個大概印象。
3.1 rollup 生成 sourcemap 便於除錯
修改rollup.config.js檔案，output輸出的配置生成sourcemap。
// redux/rollup.config.js 有些省略
const sourcemap = {
sourcemap: true,
};
output: {
// ...
...sourcemap,
}安裝依賴
git clone http://github.com/lxchuan12/redux-analysis.git
cd redux-analysi/redux
npm i
npm run build
# 編譯結束後會生成 sourcemap .map格式的檔案到 dist、es、lib 目錄下。仔細看看redux/examples目錄和redux/README。
這時我在根路徑下，新建資料夾examples，把原生js寫的計數器redux/examples/counter-vanilla/index.html，複製到examples/index.html。同時把打包後的包含sourcemap的redux/dist目錄，複製到examples/dist目錄。
修改index.html的script的redux.js檔案為dist中的路徑。
為了便於區分和除錯後續html檔案，我把index.html重新命名為index.1.redux.getState.dispatch.html。
# redux-analysis 根目錄
# 安裝啟動服務的npm包
npm i -g http-server
cd examples
hs -p 5000就可以開心的除錯啦。可以直接克隆我的專案git clone http://github.com/lxchuan12/redux-analysis.git。本地除錯，動手實踐，容易消化吸收。
4. 通過除錯計數器例子的學習 redux 原始碼
接著我們來看examples/index.1.redux.getState.dispatch.html檔案。先看html部分。只是寫了幾個 button，比較簡單。
<div>
<p>
Clicked: <span id="value">0</span> times
<button id="increment">+</button>
<button id="decrement">-</button>
<button id="incrementIfOdd">Increment if odd</button>
<button id="incrementAsync">Increment async</button>
</p>
</div>js部分，也比較簡單。宣告瞭一個counter函式，傳遞給Redux.createStore(counter)，得到結果store，而store是個物件。render方法渲染數字到頁面。用store.subscribe(render)訂閱的render方法。還有store.dispatch({type: 'INCREMENT' })方法，呼叫store.dispatch時會觸發render方法。這樣就實現了一個計數器。
function counter(state, action) {
if (typeof state === 'undefined') {
return 0
}
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
var store = Redux.createStore(counter)
var valueEl = document.getElementById('value')
function render() {
valueEl.innerHTML = store.getState().toString()
}
render()
store.subscribe(render)
document.getElementById('increment')
.addEventListener('click', function () {
store.dispatch({ type: 'INCREMENT' })
})
// 省略部分暫時無效程式碼...思考：看了這段程式碼，你會在哪打斷點來除錯呢。
// 四處可以斷點來看
// 1.
var store = Redux.createStore(counter)
// 2.
function render() {
valueEl.innerHTML = store.getState().toString()
}
render()
// 3.
store.subscribe(render)
// 4.
store.dispatch({ type: 'INCREMENT' })
圖中的右邊Scope，有時需要關注下，會顯示閉包、全域性環境、當前環境等變數，還可以顯示函式等具體程式碼位置，能幫助自己理解程式碼。
斷點除錯，按F5重新整理頁面後，按F8，把滑鼠放在Redux和store上。
可以看到Redux上有好幾個方法。分別是：
- __DO_NOT_USE__ActionTypes: {INIT: "@@redux/INITu.v.d.u.6.r", REPLACE: "@@redux/REPLACEg.u.u.7.c", PROBE_UNKNOWN_ACTION: ƒ}
- applyMiddleware: ƒ applyMiddleware() 函式是一個增強器，組合多箇中介軟體，最終增強
store.dispatch函式，dispatch時，可以串聯執行所有中介軟體。 - bindActionCreators: ƒ bindActionCreators(actionCreators, dispatch) 生成actions，主要用於其他庫，比如
react-redux。 - combineReducers: ƒ combineReducers(reducers) 組合多個
reducers，返回一個總的reducer函式。 - compose: ƒ compose() 組合多個函式，從右到左，比如：compose(f, g, h) 最終得到這個結果 (...args) => f(g(h(...args))).
- createStore: ƒ createStore(reducer, preloadedState, enhancer) 生成
store物件
再看store也有幾個方法。分別是：
- dispatch: ƒ dispatch(action) 派發動作，也就是把
subscribe收集的函式，依次遍歷執行 - subscribe: ƒ subscribe(listener) 訂閱收集函式存在陣列中，等待觸發
dispatch依次執行。返回一個取消訂閱的函式，可以取消訂閱監聽。 - getState: ƒ getState() 獲取存在
createStore函式內部閉包的物件。 - replaceReducer: ƒ replaceReducer(nextReducer) 主要用於
redux開發者工具，對比當前和上一次操作的異同。有點類似時間穿梭功能。 - Symbol(observable): ƒ observable()
也就是官方文件redux.org.js上的 API。
暫時不去深究每一個API的實現。重新按F5重新整理頁面，斷點到var store = Redux.createStore(counter)。一直按F11，先走一遍主流程。
4.1 Redux.createSotre
createStore 函式結構是這樣的，是不是看起來很簡單，最終返回物件store，包含dispatch、subscribe、getState、replaceReducer等方法。
// 省略了若干程式碼
export default function createStore(reducer, preloadedState, enhancer) {
// 省略引數校驗和替換
// 當前的 reducer 函式
let currentReducer = reducer
// 當前state
let currentState = preloadedState
// 當前的監聽陣列函式
let currentListeners = []
// 下一個監聽陣列函式
let nextListeners = currentListeners
// 是否正在dispatch中
let isDispatching = false
function ensureCanMutateNextListeners() {
if (nextListeners === currentListeners) {
nextListeners = currentListeners.slice()
}
}
function getState() {
return currentState
}
function subscribe(listener) {}
function dispatch(action) {}
function replaceReducer(nextReducer) {}
function observable() {}
// ActionTypes.INIT @@redux/INITu.v.d.u.6.r
dispatch({ type: ActionTypes.INIT })
return {
dispatch,
subscribe,
getState,
replaceReducer,
[$$observable]: observable
}
}4.2 store.dispatch(action)
function dispatch(action) {
// 判斷action是否是物件，不是則報錯
if (!isPlainObject(action)) {
throw new Error(
'Actions must be plain objects. ' +
'Use custom middleware for async actions.'
)
}
// 判斷action.type 是否存在，沒有則報錯
if (typeof action.type === 'undefined') {
throw new Error(
'Actions may not have an undefined "type" property. ' +
'Have you misspelled a constant?'
)
}
// 不是則報錯
if (isDispatching) {
throw new Error('Reducers may not dispatch actions.')
}
try {
isDispatching = true
currentState = currentReducer(currentState, action)
} finally {
// 呼叫完後置為 false
isDispatching = false
}
// 把 收集的函式拿出來依次呼叫
const listeners = (currentListeners = nextListeners)
for (let i = 0; i < listeners.length; i++) {
const listener = listeners[i]
listener()
}
// 最終返回 action
return action
}var store = Redux.createStore(counter)上文除錯完了這句。
繼續按F11除錯。
function render() {
valueEl.innerHTML = store.getState().toString()
}
render()4.3 store.getState()
getState函式實現比較簡單。
function getState() {
// 判斷正在dispatch中，則報錯
if (isDispatching) {
throw new Error(
'You may not call store.getState() while the reducer is executing. ' +
'The reducer has already received the state as an argument. ' +
'Pass it down from the top reducer instead of reading it from the store.'
)
}
// 返回當前的state
return currentState
}4.4 store.subscribe(listener)
訂閱監聽函式，存放在陣列中，store.dispatch(action)時遍歷執行。
function subscribe(listener) {
// 訂閱引數校驗不是函式報錯
if (typeof listener !== 'function') {
throw new Error('Expected the listener to be a function.')
}
// 正在dispatch中，報錯
if (isDispatching) {
throw new Error(
'You may not call store.subscribe() while the reducer is executing. ' +
'If you would like to be notified after the store has been updated, subscribe from a ' +
'component and invoke store.getState() in the callback to access the latest state. ' +
'See https://redux.js.org/api-reference/store#subscribelistener for more details.'
)
}
// 訂閱為 true
let isSubscribed = true
ensureCanMutateNextListeners()
nextListeners.push(listener)
// 返回一個取消訂閱的函式
return function unsubscribe() {
if (!isSubscribed) {
return
}
// 正在dispatch中，則報錯
if (isDispatching) {
throw new Error(
'You may not unsubscribe from a store listener while the reducer is executing. ' +
'See https://redux.js.org/api-reference/store#subscribelistener for more details.'
)
}
// 訂閱為 false
isSubscribed = false
ensureCanMutateNextListeners()
// 找到當前監聽函式
const index = nextListeners.indexOf(listener)
// 在陣列中刪除
nextListeners.splice(index, 1)
currentListeners = null
}
}到這裡，我們就除錯學習完了Redux.createSotre、store.dispatch、store.getState、store.subscribe的原始碼。
接下來，我們寫個中介軟體例子，來除錯中介軟體相關原始碼。
5. Redux 中介軟體相關原始碼
中介軟體是重點，面試官也經常問這類問題。
5.1 Redux.applyMiddleware(...middlewares)
5.1.1 準備 logger 例子除錯
為了除錯Redux.applyMiddleware(...middlewares)，我在examples/js/middlewares.logger.example.js寫一個簡單的logger例子。分別有三個logger1，logger2，logger3函式。由於都是類似，所以我在這裡只展示logger1函式。
// examples/js/middlewares.logger.example.js
function logger1({ getState }) {
return next => action => {
console.log('will dispatch--1--next, action:', next, action)
// Call the next dispatch method in the middleware chain.
const returnValue = next(action)
console.log('state after dispatch--1', getState())
// This will likely be the action itself, unless
// a middleware further in chain changed it.
return returnValue
}
}
// 省略 logger2、logger3logger中介軟體函式做的事情也比較簡單，返回兩層函式，next就是下一個中介軟體函式，呼叫返回結果。為了讓讀者能看懂，我把logger1用箭頭函式、logger2則用普通函式。
寫好例子後，我們接著來看怎麼除錯Redux.applyMiddleware(...middlewares))原始碼。
cd redux-analysis && hs -p 5000
# 上文說過npm i -g http-server開啟http://localhost:5000/examples/index.2.redux.applyMiddleware.compose.html，按F12開啟控制檯，
先點選加號操作+1，把結果展示出來。
從圖中可以看出，next則是下一個函式。先1-2-3，再3-2-1這樣的順序。
這種也就是我們常說的中介軟體，面向切面程式設計（AOP）。
接下來除錯，在以下語句打上斷點和一些你覺得重要的地方打上斷點。
// examples/index.2.redux.applyMiddleware.compose.html
var store = Redux.createStore(counter, Redux.applyMiddleware(logger1, logger2, logger3))5.1.2 Redux.applyMiddleware(...middlewares) 原始碼
// redux/src/applyMiddleware.js
/**
* ...
* @param {...Function} middlewares The middleware chain to be applied.
* @returns {Function} A store enhancer applying the middleware.
*/
export default function applyMiddleware(...middlewares) {
return createStore => (...args) => {
const store = createStore(...args)
let dispatch = () => {
throw new Error(
'Dispatching while constructing your middleware is not allowed. ' +
'Other middleware would not be applied to this dispatch.'
)
}
const middlewareAPI = {
getState: store.getState,
dispatch: (...args) => dispatch(...args)
}
const chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}// redux/src/createStore.js
export default function createStore(reducer, preloadedState, enhancer) {
// 省略引數校驗
// 如果第二個引數`preloadedState`是函式，並且第三個引數`enhancer`是undefined，把它們互換一下。
if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
enhancer = preloadedState
preloadedState = undefined
}
if (typeof enhancer !== 'undefined') {
if (typeof enhancer !== 'function') {
throw new Error('Expected the enhancer to be a function.')
}
// enhancer 也就是`Redux.applyMiddleware`返回的函式
// createStore 的 args 則是 `reducer, preloadedState`
/**
* createStore => (...args) => {
const store = createStore(...args)
return {
...store,
dispatch,
}
}
** /
// 最終返回增強的store物件。
return enhancer(createStore)(reducer, preloadedState)
}
// 省略後續程式碼
}把接收的中介軟體函式logger1, logger2, logger3放入到 了middlewares陣列中。Redux.applyMiddleware最後返回兩層函式。
把中介軟體函式都混入了引數getState和dispatch。
// examples/index.2.redux.applyMiddleware.compose.html
var store = Redux.createStore(counter, Redux.applyMiddleware(logger1, logger2, logger3))最後這句其實是返回一個增強了dispatch的store物件。
而增強的dispatch函式，則是用Redux.compose(...functions)進行串聯起來執行的。
5.2 Redux.compose(...functions)
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)))
}// applyMiddleware.js
dispatch = compose(...chain)(store.dispatch)
// compose
funcs.reduce((a, b) => (...args) => a(b(...args)))這兩句可能不是那麼好理解，可以斷點多除錯幾次。我把箭頭函式轉換成普通函式。
funcs.reduce(function(a, b){
return function(...args){
return a(b(...args));
};
});其實redux原始碼中註釋很清晰了，這個compose函式上方有一堆註釋，其中有一句：組合多個函式，從右到左，比如：compose(f, g, h) 最終得到這個結果 (...args) => f(g(h(...args))).
5.2.1 compose 函式演化
看Redux.compose(...functions)函式原始碼後，還是不明白，不要急不要慌，吃完雞蛋還有湯。仔細來看如何演化而來，先來簡單看下如下需求。
傳入一個數值，計算數值乘以10再加上10，再減去2。
實現起來很簡單。
const calc = (num) => num * 10 + 10 - 2;
calc(10); // 108但這樣寫有個問題，不好擴充套件，比如我想乘以10時就列印出結果。
為了便於擴充套件，我們分開寫成三個函式。
const multiply = (x) => {
const result = x * 10;
console.log(result);
return result;
};
const add = (y) => y + 10;
const minus = (z) => z - 2;
// 計算結果
console.log(minus(add(multiply(10))));
// 100
// 108
// 這樣我們就把三個函式計算結果出來了。再來實現一個相對通用的函式，計算這三個函式的結果。
const compose = (f, g, h) => {
return function(x){
return f(g(h(x)));
}
}
const calc = compose(minus, add, multiply);
console.log(calc(10));
// 100
// 108這樣還是有問題，只支援三個函式。我想支援多個函式。
我們瞭解到陣列的reduce方法就能實現這樣的功能。
前一個函式
// 我們常用reduce來計算數值陣列的總和
[1,2,3,4,5].reduce((pre, item, index, arr) => {
console.log('(pre, item, index, arr)', pre, item, index, arr);
// (pre, item, index, arr) 1 2 1 (5) [1, 2, 3, 4, 5]
// (pre, item, index, arr) 3 3 2 (5) [1, 2, 3, 4, 5]
// (pre, item, index, arr) 6 4 3 (5) [1, 2, 3, 4, 5]
// (pre, item, index, arr) 10 5 4 (5) [1, 2, 3, 4, 5]
return pre + item;
});
// 15pre 是上一次返回值，在這裡是數值1,3,6,10。在下一個例子中則是匿名函式。
function(x){
return a(b(x));
}item是2,3,4,5，在下一個例子中是minus、add、multiply。
const compose = (...funcs) => {
return funcs.reduce((a, b) => {
return function(x){
return a(b(x));
}
})
}
const calc = compose(minus, add, multiply);
console.log(calc(10));
// 100
// 108而Redux.compose(...functions)其實就是這樣，只不過中介軟體是返回雙層函式罷了。
所以返回的是next函式，他們串起來執行了，形成了中介軟體的洋蔥模型。
人們都說一圖勝千言。我畫了一個相對簡單的redux中介軟體原理圖。
如果還不是很明白，建議按照我給出的例子，多除錯。
cd redux-analysis && hs -p 5000
# 上文說過npm i -g http-server開啟http://localhost:5000/examples/index.3.html，按F12開啟控制檯除錯。
5.2.2 前端框架的 compose 函式的實現
lodash原始碼中 compose函式的實現，也是類似於陣列的reduce，只不過是內部實現的arrayReduce
// lodash原始碼
function baseWrapperValue(value, actions) {
var result = value;
// 如果是lazyWrapper的例項，則呼叫LazyWrapper.prototype.value 方法，也就是 lazyValue 方法
if (result instanceof LazyWrapper) {
result = result.value();
}
// 類似 [].reduce()，把上一個函式返回結果作為引數傳遞給下一個函式
return arrayReduce(actions, function(result, action) {
return action.func.apply(action.thisArg, arrayPush([result], action.args));
}, result);
}koa-compose原始碼也有compose函式的實現。實現是迴圈加promise。
由於程式碼比較長我就省略了，具體看連結若川：學習 koa 原始碼的整體架構，淺析koa洋蔥模型原理和co原理小節 koa-compose 原始碼（洋蔥模型實現）
6. Redux.combineReducers(reducers)
開啟http://localhost:5000/examples/index.4.html，按F12開啟控制檯，按照給出的例子，除錯接下來的Redux.combineReducers(reducers)和Redux.bindActionCreators(actionCreators, dispatch)具體實現。由於文章已經很長了，這兩個函式就不那麼詳細解釋了。
combineReducers函式簡單來說就是合併多個reducer為一個函式combination。
export default function combineReducers(reducers) {
const reducerKeys = Object.keys(reducers)
const finalReducers = {}
for (let i = 0; i < reducerKeys.length; i++) {
const key = reducerKeys[i]
// 省略一些開發環境判斷的程式碼...
if (typeof reducers[key] === 'function') {
finalReducers[key] = reducers[key]
}
}
// 經過一些處理後得到最後的finalReducerKeys
const finalReducerKeys = Object.keys(finalReducers)
// 省略一些開發環境判斷的程式碼...
return function combination(state = {}, action) {
// ... 省略開發環境的一些判斷
// 用 hasChanged變數 記錄前後 state 是否已經修改
let hasChanged = false
// 宣告物件來儲存下一次的state
const nextState = {}
//遍歷 finalReducerKeys
for (let i = 0; i < finalReducerKeys.length; i++) {
const key = finalReducerKeys[i]
const reducer = finalReducers[key]
const previousStateForKey = state[key]
// 執行 reducer
const nextStateForKey = reducer(previousStateForKey, action)
// 省略容錯程式碼 ...
nextState[key] = nextStateForKey
// 兩次 key 對比 不相等則發生改變
hasChanged = hasChanged || nextStateForKey !== previousStateForKey
}
// 最後的 keys 陣列對比 不相等則發生改變
hasChanged =
hasChanged || finalReducerKeys.length !== Object.keys(state).length
return hasChanged ? nextState : state
}
}7. Redux.bindActionCreators(actionCreators, dispatch)
如果第一個引數是一個函式，那就直接返回一個函式。如果是一個物件，則遍歷賦值，最終生成boundActionCreators物件。
function bindActionCreator(actionCreator, dispatch) {
return function() {
return dispatch(actionCreator.apply(this, arguments))
}
}
export default function bindActionCreators(actionCreators, dispatch) {
if (typeof actionCreators === 'function') {
return bindActionCreator(actionCreators, dispatch)
}
// ... 省略一些容錯判斷
const boundActionCreators = {}
for (const key in actionCreators) {
const actionCreator = actionCreators[key]
if (typeof actionCreator === 'function') {
boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
}
}
return boundActionCreators
}redux所提供的的API 除了store.replaceReducer(nextReducer)沒分析，其他都分析了。
8. vuex 和 redux 簡單對比
8.1 原始碼實現形式
從原始碼實現上來看，vuex原始碼主要使用了建構函式，而redux則是多用函數語言程式設計、閉包。
8.2 耦合度
vuex 與 vue 強耦合，脫離了vue則無法使用。而redux跟react沒有關係，所以它可以使用於小程式或者jQuery等。如果需要和react使用，還需要結合react-redux庫。
8.3 擴充套件
// logger 外掛，具體實現省略
function logger (store) {
console.log('store', store);
}
// 作為陣列傳入
new Vuex.Store({
state,
getters,
actions,
mutations,
plugins: process.env.NODE_ENV !== 'production'
? [logger]
: []
})
// vuex 原始碼 外掛執行部分
class Store{
constructor(){
// 把vuex的例項物件 store整個物件傳遞給外掛使用
plugins.forEach(plugin => plugin(this))
}
}vuex實現擴充套件則是使用外掛形式，而redux是中介軟體的形式。redux的中介軟體則是AOP（面向切面程式設計），redux中Redux.applyMiddleware()其實也是一個增強函式，所以也可以使用者來實現增強器，所以redux生態比較繁榮。
8.4 上手難易度
相對來說，vuex上手相對簡單，redux相對難一些，redux涉及到一些函數語言程式設計、高階函式、純函式等概念。
9. 總結
文章主要通過一步步除錯的方式循序漸進地講述redux原始碼的具體實現。旨在教會讀者除錯原始碼，不懼怕原始碼。
面試官經常喜歡考寫一個redux中介軟體，說說redux中介軟體的原理。
function logger1({ getState }) {
return next => action => {
const returnValue = next(action)
return returnValue
}
}const 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)))
return funcs.reduce((a, b) => {
return function(x){
return a(b(x));
}
})
}const enhancerStore = Redux.create(reducer, Redux.applyMiddleware(logger1, ...))
enhancerStore.dispatch(action)使用者觸發enhancerStore.dispatch(action)是增強後的，其實就是第一個中介軟體函式，中間的next是下一個中介軟體函式，最後next是沒有增強的store.dispatch(action)。
最後再來看張redux工作流程圖
是不是就更理解些了呢。
如果讀者發現有不妥或可改善之處，再或者哪裡沒寫明白的地方，歡迎評論指出。另外覺得寫得不錯，對你有些許幫助，可以點贊、評論、轉發分享，也是對我的一種支援，非常感謝呀。要是有人說到怎麼讀原始碼，正在讀文章的你能推薦我的原始碼系列文章，那真是太好了。
推薦閱讀
@鬍子大哈：動手實現 Redux（一）：優雅地修改共享狀態，總共6小節，非常推薦，雖然我很早前就看完了《react小書》，現在再看一遍又有收穫
美團@瑩瑩 Redux從設計到原始碼，美團這篇是我基本寫完文章後看到的，感覺寫得很好，非常推薦
redux 中文文件
redux 英文文件
若川的學習redux原始碼倉庫
另一個系列
面試官問：JS的繼承
面試官問：JS的this指向
面試官問：能否模擬實現JS的call和apply方法
面試官問：能否模擬實現JS的bind方法
面試官問：能否模擬實現JS的new操作符
關於
作者：常以若川為名混跡於江湖。前端路上 | PPT愛好者 | 所知甚少，唯善學。
若川的部落格，使用vuepress重構了，閱讀體驗可能更好些
掘金專欄，歡迎關注~segmentfault前端視野專欄，歡迎關注~
知乎前端視野專欄，歡迎關注~
語雀前端視野專欄，新增語雀專欄，歡迎關注~
github blog，相關原始碼和資源都放在這裡，求個star^_^~
歡迎加微信交流 微信公眾號
可能比較有趣的微信公眾號，長按掃碼關注。歡迎加我微信ruochuan12（註明來源，基本來者不拒），拉你進【前端視野交流群】，長期交流學習~
