學習redux源碼整體架構,深入理解redux及其中間件原理

NO IMAGE

1. 前言

你好,我是若川。這是學習源碼整體架構系列第八篇。整體架構這詞語好像有點大,姑且就算是源碼整體結構吧,主要就是學習是代碼整體結構,不深究其他不是主線的具體函數的實現。本篇文章學習的是實際倉庫的代碼。

要是有人說到怎麼讀源碼,正在讀文章的你能推薦我的源碼系列文章,那真是太好了。

學習源碼整體架構系列文章如下:

1.學習 jQuery 源碼整體架構,打造屬於自己的 js 類庫
2.學習 underscore 源碼整體架構,打造屬於自己的函數式編程類庫
3.學習 lodash 源碼整體架構,打造屬於自己的函數式編程類庫
4.學習 sentry 源碼整體架構,打造屬於自己的前端異常監控SDK
5.學習 vuex 源碼整體架構,打造屬於自己的狀態管理庫
6.學習 axios 源碼整體架構,打造屬於自己的請求庫
7.學習 koa 源碼的整體架構,淺析koa洋蔥模型原理和co原理
8.學習 redux 源碼整體架構,深入理解 redux 及其中間件原理

感興趣的讀者可以點擊閱讀。
其他源碼計劃中的有:expressvue-rotuerreact-redux 等源碼,不知何時能寫完(哭泣),歡迎持續關注我(若川)。

源碼類文章,一般閱讀量不高。已經有能力看懂的,自己就看了。不想看,不敢看的就不會去看源碼。
所以我的文章,儘量寫得讓想看源碼又不知道怎麼看的讀者能看懂。

閱讀本文你將學到:

  1. git subtree 管理子倉庫
  2. 如何學習 redux 源碼
  3. redux 中間件原理
  4. redux 各個API的實現
  5. vuexredux 的對比
  6. 等等

1.1 本文閱讀最佳方式

把我的redux源碼倉庫 git clone https://github.com/lxchuan12/redux-analysis.git克隆下來,順便star一下我的redux源碼學習倉庫^_^。跟著文章節奏調試和示例代碼調試,用chrome動手調試印象更加深刻。文章長段代碼不用細看,可以調試時再細看。看這類源碼文章百遍,可能不如自己多調試幾遍。也歡迎加我微信交流ruochuan12

2. git subtree 管理子倉庫

寫了很多源碼文章,vuexaxioskoa等都是使用新的倉庫克隆一份源碼在自己倉庫中。
雖然電腦可以拉取最新代碼,看到原作者的git信息。但上傳到github後。讀者卻看不到原倉庫作者的git信息了。於是我找到了git submodules 方案,但並不是很適合。再後來發現了git subtree

簡單說下 npm packagegit subtree的區別。
npm package是單向的。git subtree則是雙向的。

具體可以查看這篇文章@德來(原有贊大佬):用 Git Subtree 在多個 Git 項目間雙向同步子項目,附簡明使用手冊

學會了git subtree後,我新建了redux-analysis項目後,把redux源碼4.x(截止至2020年06月13日,4.x分支最新版本是4.0.5master分支是ts,文章中暫不想讓一些不熟悉ts的讀者看不懂)分支克隆到了我的項目裡的一個子項目,得以保留git信息。

對應命令則是:

git subtree add --prefix=redux https://github.com/reduxjs/redux.git 4.x

3. 調試 redux 源碼準備工作

之前,我在知乎回答了一個問題若川:一年內的前端看不懂前端框架源碼怎麼辦?
推薦了一些資料,閱讀量還不錯,大家有興趣可以看看。主要有四點:

1.藉助調試
2.搜索查閱相關高贊文章
3.把不懂的地方記錄下來,查閱相關文檔
4.總結

看源碼調試很重要,所以我的每篇源碼文章都詳細描述(也許有人看來是比較囉嗦…)如何調試源碼。

斷點調試要領:
賦值語句可以一步按F10跳過,看返回值即可,後續詳細再看。
函數執行需要斷點按F11跟著看,也可以結合註釋和上下文倒推這個函數做了什麼。
有些不需要細看的,直接按F8走向下一個斷點
刷新重新調試按F5

調試源碼前,先簡單看看 redux 的工作流程,有個大概印象。

學習redux源碼整體架構,深入理解redux及其中間件原理
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。同時把打包後的包含sourcemapredux/dist目錄,複製到examples/dist目錄。

修改index.htmlscriptredux.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' })
學習redux源碼整體架構,深入理解redux及其中間件原理
redux debugger圖

圖中的右邊Scope,有時需要關注下,會顯示閉包、全局環境、當前環境等變量,還可以顯示函數等具體代碼位置,能幫助自己理解代碼。

斷點調試,按F5刷新頁面後,按F8,把鼠標放在Reduxstore上。

可以看到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,包含dispatchsubscribegetStatereplaceReducer等方法。

// 省略了若干代碼
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.createSotrestore.dispatchstore.getStatestore.subscribe的源碼。

接下來,我們寫個中間件例子,來調試中間件相關源碼。

5. Redux 中間件相關源碼

中間件是重點,面試官也經常問這類問題。

5.1 Redux.applyMiddleware(…middlewares)

5.1.1 準備 logger 例子調試

為了調試Redux.applyMiddleware(...middlewares),我在examples/js/middlewares.logger.example.js寫一個簡單的logger例子。分別有三個logger1logger2logger3函數。由於都是類似,所以我在這裡只展示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、logger3

logger中間件函數做的事情也比較簡單,返回兩層函數,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,把結果展示出來。

學習redux源碼整體架構,深入理解redux及其中間件原理
redux 中間件調試圖

從圖中可以看出,next則是下一個函數。先1-2-3,再3-2-1這樣的順序。

這種也就是我們常說的中間件,面向切面編程(AOP)。

學習redux源碼整體架構,深入理解redux及其中間件原理
中間件圖解

接下來調試,在以下語句打上斷點和一些你覺得重要的地方打上斷點。

// 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最後返回兩層函數。
把中間件函數都混入了參數getStatedispatch

// examples/index.2.redux.applyMiddleware.compose.html
var store = Redux.createStore(counter, Redux.applyMiddleware(logger1, logger2,  logger3))

最後這句其實是返回一個增強了dispatchstore對象。

而增強的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;
});
// 15

pre 是上一次返回值,在這裡是數值1,3,6,10。在下一個例子中則是匿名函數。

function(x){
return a(b(x));
}

item2,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中間件原理圖。

學習redux源碼整體架構,深入理解redux及其中間件原理
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源碼整體架構

// 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 耦合度

vuexvue 強耦合,脫離了vue則無法使用。而reduxreact沒有關係,所以它可以使用於小程序或者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(面向切面編程),reduxRedux.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源碼整體架構,深入理解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(註明來源,基本來者不拒),拉你進【前端視野交流群】,長期交流學習~

學習redux源碼整體架構,深入理解redux及其中間件原理
若川視野

本文使用 mdnice 排版

相關文章

canvas+js從0開始擼一個俄羅斯方塊

ReactNative實現AppStoreToday頁效果

駁《慎用trycatch》

頭條:如何獲取瀏覽器指紋信息