Redux-實現createStore
最近在讀Redux原始碼,現將自己實現的程式碼和理解貼上,後期再補充詳細~
/**
* 判斷某個物件是否是一個plain-object
* @param {*} obj
*/
function isPlainObject(obj) {
if (typeof obj !== "object") {
return false;
}
return Object.getPrototypeOf(obj) === Object.prototype;
}
/**
* 得到一個指定長度的隨機字串
* @param {*} length
*/
function getRandomString(length) {
return Math.random().toString(36).substr(2, length).split("").join(".")
}
/**
* 實現createStore的功能
* @param {*} reducer 接收reducer處理器
* @param {*} defaultState 初始化的狀態值
*/
export function createStore(reducer, defaultState, enhancer) {
// 判斷是否傳入defaultState
if (typeof defaultState === 'function' && typeof enhancer === 'undefined') {
enhancer = defaultState
defaultState = undefined
}
// 判斷是否傳入enhancer且為函式
if (typeof enhancer !== 'undefined') {
if (typeof enhancer !== 'function') {
throw new Error('Expected the enhancer to be a function.')
}
return enhancer(createStore)(reducer, defaultState)
}
let currentReducer = reducer, //當前使用的reducer
currentState = defaultState; //當前倉庫中的狀態
const listeners = []; //記錄所有的監聽器(訂閱者)
function dispatch(action) {
//驗證action是否是平面物件
if (!isPlainObject(action)) {
throw new TypeError("action must be a plain object");
}
//驗證action的type屬性是否存在
if (action.type === undefined) {
throw new TypeError("action must has a property of type");
}
currentState = currentReducer(currentState, action)
//執行所有的訂閱者(監聽器)
for (const listener of listeners) {
listener();
}
};
function getState() {
return currentState;
};
// 釋出訂閱模式
function subscribe(listener) {
listeners.push(listener);
let isRemove = false;
return function () {
if (isRemove) return;
//將listener從陣列中移除
const index = listeners.indexOf(listener);
listeners.splice(index, 1);
isRemove = true;
}
}
//建立倉庫時,需要分發一次初始的action
dispatch({
type: `@@redux/INIT${getRandomString(7)}`
});
return {
dispatch,
getState,
subscribe
}
}
相關文章
- Redux-原始碼解析Redux原始碼
- Redux原始碼分析(2) - createStoreRedux原始碼
- 封裝redux中的createStore封裝Redux
- Redux原始碼分析之createStoreRedux原始碼
- Redux原始碼解讀--(5)createStoreRedux原始碼
- Redux原始碼createStore解讀常用方法Redux原始碼
- React-Redux 原始碼解析 一(createStore)ReactRedux原始碼
- 逐行閱讀redux原始碼(一) createStoreRedux原始碼
- 想要永生?虛擬現實中實現永生或成現實
- AOP如何實現及實現原理
- 動手實現一個localcache - 實現篇
- vue 實現原理及簡單示例實現Vue
- Promise實現Promise
- asyncToGenerator 實現
- 實現 strStr()
- jwt實現JWT
- 訊息的即時推送——net實現、websocket實現以及socket.io實現Web
- Golang 實現 Redis(5): 使用跳錶實現 SortedSetGolangRedis
- pytorch實現yolov3(3) 實現forwardPyTorchYOLOForward
- 簡單介紹numpy實現RNN原理實現RNN
- Vue實現左右選單聯動實現(更新)Vue
- C均值聚類 C實現 Python實現聚類Python
- java實現兩個文字相似度 simHash 實現Java
- GO實現Redis:GO實現Redis叢集(5)GoRedis
- 利用棧實現佇列(C語言實現)佇列C語言
- Hadoop-Map/Reduce實現實現倒排索引Hadoop索引
- 如何實現查詢介面的所有實現類
- Docker實現服務發現Docker
- linux實現DNS輪詢實現負載平衡LinuxDNS負載
- 從零實現Vue的元件庫(十六)- Dropdown 實現Vue元件
- 分散式鎖與實現(一)基於Redis實現!分散式Redis
- 虛擬現實還需要多久才能真正的實現
- 從零實現Vue的元件庫(十二)- Table 實現Vue元件
- react全家桶實現招聘app-路由實現(二)ReactAPP路由
- 從零實現Vue的元件庫(一)- Toast 實現Vue元件AST
- 從零實現Vue的元件庫(九)- InputNumber 實現Vue元件
- 從零實現Vue的元件庫(八)- Input 實現Vue元件
- Spring實現IOC容器的兩種實現方式Spring