Redux原始碼分析之createStore

2021-09-20 08:34:36 字數 3572 閱讀 4517

redux原始碼分析之基本概念

redux原始碼分析之createstore

redux原始碼分析之bindactioncreators

redux原始碼分析之combinereducers

redux原始碼分析之compose

接著前面的,我們繼續,開啟createstore.js, 直接看最後, createstore返回的就是乙個帶著5個方法的物件。

return

同樣的,我先刪除一些不需要的**,簡化成如下, 注意看備註。(注:這裡先無視中介軟體和enhancer,後篇再說)

export const actiontypes = 

export default function createstore(reducer, preloadedstate, enhancer) // 確保currentlisteners 和 nextlisteners 是不同的引用

function getstate() // 獲得當前的狀態,返回的就是currentstate

function subscribe(listener) //訂閱監聽,返回乙個函式,執行該函式,取消監聽

function dispatch(action) // dispacth action

function replacereducer(nextreducer) // 替換 reducer

function observable() //不知道哈哈

//初始化state

dispatch()

//返回方法

return

}

ensurecanmutatenextlisteners

這個方法主要用在 subscribe裡面,

function ensurecanmutatenextlisteners() 

}

為什麼這麼設計,在subscribe方法上有很詳細的註解,我的理解是假如訂閱在執行過程中,這裡說的是訂閱執行過程,不是reducer執行過程

有新加的訂閱新增的時候,新的訂閱是不會被執行的,因為是乙份拷貝

有新的訂閱刪除的時候,被刪除的還是會執行的。

簡單說,就是新的刪除和新增,下次生效。

getstate

就是返回利用閉包存的currentstate

/**

* reads the state tree managed by the store.**/

function getstate()

subscribe

新增訂閱

function subscribe(listener) 

let issubscribed = true

ensurecanmutatenextlisteners() //複製新的

nextlisteners.push(listener)

return function unsubscribe()

issubscribed = false

ensurecanmutatenextlisteners() // 複製新的

const index = nextlisteners.indexof(listener)

nextlisteners.splice(index, 1) // 從nextlisteners裡面刪除,下次dispatch會生效

}}

dispatch

派發乙個action,讓reducer更新資料,下面都有注釋了,為啥可說的。

function dispatch(action) 

if (typeof action.type === 'undefined')

if (isdispatching)

try finally

const listeners = currentlisteners = nextlisteners // 讓nextlisteners生效

for (let i = 0; i < listeners.length; i++)

return action // 返回action

}

replacereducer

function replacereducer(nextreducer) 

currentreducer = nextreducer // 替換reducer

dispatch() // 重新初始化

}

observable 還沒啥研究,暫不說了。

最後的**為, 

dispatch()

return

這裡說一下 dispatch() 是怎麼達到初始化state的,

我們再回頭看一下disptach中的一段**

try  finally

這裡先講非合成的reducer,帶合成的後面說。

createstore的第乙個引數為 reducer,第二個為初始化state的預設值,

let todoreducer = function (state = todolist, action) 

}

這裡相對特別的是 合成recuder,後面再說。

再回頭看看我們第一篇提到的**:(雲淡風輕)

/* 簡單示例 */

let = self.redux

//預設state

let todolist =

// reducer

let todoreducer = function (state, action)

}//建立store

let store = createstore(todoreducer,todolist)

//訂閱

function subscribe1fn()

let sub = store.subscribe(subscribe1fn)

store.dispatch(

})store.dispatch(

})store.dispatch()

// 取消訂閱

sub()

console.log('取消訂閱後:')

store.dispatch(

})

redux原始碼分析(三) 原始碼部分

下面是每個部分的一些解讀 createstore apicreatestore reducer,initialstate enhancer 曾經非常好奇這個函式的第二個引數到底是initialstate還是enhancer,因為見過兩種寫法都有的,以為是版本問題。看了原始碼才發現,都可以的。如果你不...

大道至簡之redux原始碼分析

知乎 對於大型複雜應用程式來說,我們經常需要共享某些元件的狀態或者乙個元件需要改變另外乙個元件的狀態。如果沒有乙個合適的管理工具管理狀態,很快就會變成一團亂。使用 redux 的開發者越來越多,但背後 redux 原理和為什麼用 redux 很多人其實並不清楚。如果我們不能完全理解 redux 的思...

Redux原始碼解析

輸出 複製 這些函式會呼叫到閉包裡面的一些變數,如currentstate,currentreducer,currentlisteners。作用 將action和state傳入reducer並修改對應的state,並執行listeners陣列裡面的所有listener 核心就是這句 currents...