Redux原始碼解讀 (5)createStore

2021-08-14 17:46:01 字數 2183 閱讀 3408

下面介紹最後乙個函式,createstore.先上乙個基本的用法吧。

const

store

=下面上原始碼吧。首先說一下,這麼多**其實首次執行的邏輯很簡單,大部分**都是定義了乙個函式去等待呼叫的,真正就只是呼叫了乙個預設的dispatch方法,初始化了一下下currentstate.

export default function createstore(reducer, preloadedstate, enhancer)

if (typeof enhancer !== 'undefined')

} if (typeof reducer !== 'function')

let currentreducer = reducer

let currentstate = preloadedstate //當前的state

let currentlisteners = //當前的listeners

let nextlisteners = currentlisteners

let isdispatching = false //是否正在分發

function ensurecanmutatenextlisteners()

} function getstate()

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) //從listeners中去除

}} function dispatch(action)

throw new error(

'actions must be plain objects. ' +

'use custom middleware for async actions.')}

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

if (isdispatching)

try finally

const listeners = currentlisteners = nextlisteners

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

return action

} function replacereducer(nextreducer)

currentreducer = nextreducer //更換當前的reducer,並且執行預設dispatch返回預設值。

dispatch()

}//由於乙個正規的reducer都會返回乙個預設值,執行這一步(actiontypes真的很少會被定義),為了返回reducer的預設值。

dispatch()

return

}

提公升:

const store = createstore(combinereducers(),

{},composeenhancers( //這個函式也是乙個類庫中引用的

myehancer

));

還是那個compose的套路,

我傳遞的引數是createstore這個函式,他返回乙個createstore函式,然後在下乙個函式中把上乙個傳入的createstore執行一下,這就是我們要做的。這裡增強的是createstore這個函式。

const myehancer = (createstore)=> (reducer, preloadedstate) => 

return ;

}

由於createstore不止執行性的操作,所以這裡的return 不可以省略,每次返回的都是自己增強過的store。

redux原始碼解讀

背景 因為就得去實習了。所以打算開始補補坑。比如自己閱讀原始碼的計畫。所以今天來聊聊redux的原始碼。後續會有redux thunk和react redux的原始碼閱讀。搞定這些的話,就開始閱讀乙個node的庫的原始碼了,比如eventproxy和anywhere。開始檔案看起來貌似不少,其實,要...

Redux原始碼解析

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

redux原始碼解析

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