Redux原始碼解析

輸出：

複製**

這些函式會呼叫到閉包裡面的一些變數，如currentstate, currentreducer, currentlisteners。

作用：將action和state傳入reducer並修改對應的state，並執行listeners陣列裡面的所有listener 核心就是這句

currentstate = currentreducer(currentstate, action)
複製**

作用：將一堆reducer存在閉包裡面，最終返回乙個總的reducer

輸入：乙個物件，物件中每個屬性對應乙個reducer


}}複製**

核心**：

// 將reducer存到閉包中
const finalreducers = {}
for (let i = 0; i < reducerkeys.length; i++) "`)}}
if (typeof reducers[key] === 'function') } 
// 輸出：乙個總的recuder函式，作用為遍歷所有的reducer，返回乙個state
return
function combination(state = {}, action) 
for (let i = 0; i < finalreducerkeys.length; i++) 
nextstate[key] = nextstateforkey
haschanged = haschanged || nextstateforkey !== previousstateforkey
}return haschanged ? nextstate : state
}複製**

核心**：

const middlewareapi = 
const chain = middlewares.map(middleware => middleware(middlewareapi))
dispatch = compose(...chain)(store.dispatch)
複製**

其中compose其實就是使用array.reduce從右到左執行函式

compose核心**：

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

每次新增listener時都先深複製複製乙份之前的listener

返回乙個unsubscribe函式

let issubscribed = true
ensurecanmutatenextlisteners()
nextlisteners.push(listener)
return
function
unsubscribe
()   if (isdispatching) 
issubscribed = false
ensurecanmutatenextlisteners()
const index = nextlisteners.indexof(listener)
nextlisteners.splice(index, 1)
}複製**

用array.slice()方法來深複製

function
ensurecanmutatenextlisteners
() }
複製**

通過分析redux的原始碼，首先我們可以更好的理解我們使用redux的時候，裡面具體發生了什麼事情，其次是可以更清楚地看到各種redux的外掛程式是如何加入到redux裡面的，對於我們以後使用redux或者redux的外掛程式會有幫助。

另一方面，從**的組織上來看，可以看到了裡面有很多閉包的使用，還有各種各樣的錯誤處理，以及簡潔的語法，對於自身**質量的提高也有一定的影響。

redux原始碼解析

關於redux的基本概念和工作流如何進行的這裡就不進行過多概述了，可以檢視相關文件去了解。流程圖鏈結以下是redux的原始碼結構圖，主要的就是以下幾個檔案組成，我們接下來按順序進行介紹其中原理和實現過程。首先了解下createstore.js。通過呼叫createstore建立唯一的store，s...

Redux原始碼解析

redux原始碼解析

redux原始碼解析

redux原始碼解析

相關推薦