redux原始碼解讀

背景

因為就得去實習了。所以打算開始補補坑。比如自己閱讀原始碼的計畫。所以今天來聊聊redux的原始碼。後續會有redux-thunk和react-redux的原始碼閱讀。搞定這些的話，就開始閱讀乙個node的庫的原始碼了，比如eventproxy和anywhere。

開始檔案看起來貌似不少，其實，要理解redux的內部實現，主要就看 createstore.js

export
default
function
combinereducers(reducers) , action) 
if (process.env.node_env !== 'production') 
}// haschanged來標誌是否計算出了新的state
let haschanged = false
// 這個就是儲存新的state的
const nextstate = {}
// emmmm, 就是遍歷每乙個reducer，把action傳進去，計算state
for (let i = 0; i < finalreducerkeys.length; i++) 
nextstate[key] = nextstateforkey
// 此處來判斷是否有新的state
haschanged = haschanged || nextstateforkey !== previousstateforkey
}// 根據該標誌，決定返回原來的state, 還是新的state
return haschanged ? nextstate : state
}}複製**

這個部分就是用來擴充套件redux的功能的。因為redux的最原始的功能就是操作state，管理state。如果我們需要在這個基礎上，根據需求擴充套件一些功能，就需要通過使用別人編寫好的中介軟體，或者自己編寫的中介軟體來達到需求。比如，發起乙個dispatch時，我們為了方便除錯，不願意每次自己手動console.log出這個action，這個時候編寫乙個logger中介軟體，就可以自動列印出每次dispatch發起的action，就很容易方便我們測試。又比如，我們要處理非同步的action，就可以使用redux-thunk和redux-saga這類中介軟體。總之，該函式為我們提供了無限的可能。

我們一點點來看**：

export
default
function
return
createstore => (...args) => 
}複製**

if (typeof enhancer !== 'undefined') 
return enhancer(createstore)(reducer, preloadedstate)
}複製**

當enhancer不為空且為函式時，就執行該函式，並return回去，作為creatstore的返回值。而這個enhancer是什麼呢？翻看redux的文件：

複製**

return
createstore => (...args) => 
const middlewareapi = 
// 2、compose是如何將中介軟體串聯在一起的?
// 首先乙個最簡單的中介軟體的格式: store => next => action => {}
// 這一行**就是傳入了store, 獲得了 next => action => {} 的函式
const chain = middlewares.map(middleware => middleware(middlewareapi))
// 這一行**其實拆分成兩行
// const composeres = compose(...chain);
// dispatch = composeres(store.dispatch);
// 第一行是通過compose, 將乙個 這樣 next => action => {} 的陣列組合成 (...args) => f(g(b(...args))) 這麼乙個函式
// 第二行通過傳入store.dispatch, 這個store.dispatch就是最後乙個 next => action => {}的next引數
// 傳入後 (...args) => f(g(b(...args)) 就會執行, 執行時, store.dispacth作為b的next傳入, b函式結果action => {}會作為
// g的next傳入, 以此類推. 所以最後dispatch作為有中介軟體的store的dispatch屬性輸出, 當使用者呼叫dispatch時, 中介軟體就會乙個乙個
// 執行完邏輯後, 將執行權給下乙個, 直到原始的store.dispacth, 最後計算出新的state
dispatch = compose(...chain)(store.dispatch)
return 
}複製**

跟著上面的注釋，大家應該能弄懂enhancer的原理。我這裡總結一下，enhancer接收乙個creatstore，會在內部建立乙個store，然後對該store進行增強，增強的部位在於dispatch。增強的具體方式是通過compose來構造乙個dispatch鏈，鏈的具體形式就是**[中介軟體1，中介軟體2, ......, 中介軟體n, store.dispatch]** ，然後將增強的dispatch作為store新的dispatch暴露給使用者。那使用者每次dispatch的時候，就會依次執行每個中介軟體，執行完當前的，會將執行權交給下乙個，直到reducer中，計算出新的state。

結語

redux原始碼解讀

Redux原始碼解讀（5）createStore

Redux原始碼解析

redux原始碼解析

redux原始碼解讀

Redux原始碼解讀 （5）createStore

Redux原始碼解析

redux原始碼解析

相關推薦

Redux原始碼解讀（5）createStore