Redux原始碼學習篇 一 redux實現

本文會逐步探索redux到應用分為3個系列

redux 實現

react-redux 實現

redux中介軟體的應用與實現

import

from
'redux'
//action
const
like
="like"
;const
unlike
="unlike"
;const initialstate=0;
const
reducer
=(state=initialstate, action)
=>};
const store =
createstore
(combinereducers()
);console.
log(
"init"
, store.
getstate()
);const
render=(
)=>
;store.
subscribe
(render)
;store.
dispatch()
;// console.log("like", store.getstate());
store.
dispatch()
;// console.log("like", store.getstate());

store 作為乙個物件，提供了直接獲取頁面資料狀態的getstate 方法、觸發更新 store

dispatch 方法，以及訂閱 store 狀態變化的subscribe 方法等，進而維護了整個應用 的資料狀態和頁面渲染。如下是 store 的重要方法.

canst store=

createstore
(reducer, preloadedstate, enhancer)
;const store=

const

createstore
=(reducer,initstate)
=>
const
subscribe
=(listener)
=>
}dispatch()
//初始化 state
return
}

是為了首次初始化store

通過觀察者模式，即dispatch起到通知的作用，subscribe即註冊監聽者(觀察者)

觀察者模式

下圖是具體uml實現圖

// 觀察者

class
observer
}class
subject
//新增觀察者
addobserver
(observer:observer)
//通知所有觀察者
notify()
)}}var subject=
newsubject()
;const
say=()
=>console.
log(
'call observer');
const ob1=
newobserver
(say)
;const ob2=
newobserver
(say)
;subject.
addobserver
(ob1)
;subject.
addobserver
(ob2)
;subject.
notify
()

/**

* * @param reducers 
* @returns 乙個歸一化的rootreducer函式，
* 該函式返回值是經過各個reducers計算後的state
*/const
combinereducers
= reducers =>
, action)
=>,)
;};}
;

redux中文官網

《react 狀態管理與同構》書籍

Redux原始碼解析

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

redux原始碼解讀

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

redux原始碼解析

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