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中的createStore封裝Redux
- Redux原始碼分析(2) - createStoreRedux原始碼
- Redux原始碼分析之createStoreRedux原始碼
- 逐行閱讀redux原始碼(一) createStoreRedux原始碼
- React-Redux 原始碼解析 一(createStore)ReactRedux原始碼
- Redux原始碼createStore解讀常用方法Redux原始碼
- AOP如何實現及實現原理
- vue 實現原理及簡單示例實現Vue
- pytorch實現yolov3(3) 實現forwardPyTorchYOLOForward
- 動手實現一個localcache - 實現篇
- C均值聚類 C實現 Python實現聚類Python
- 訊息的即時推送——net實現、websocket實現以及socket.io實現Web
- autograd實現
- Promise實現Promise
- jwt實現JWT
- asyncToGenerator 實現
- 實現 strStr()
- ALU實現
- Vue實現左右選單聯動實現(更新)Vue
- Golang 實現 Redis(5): 使用跳錶實現 SortedSetGolangRedis
- linux實現DNS輪詢實現負載平衡LinuxDNS負載
- 簡易實現 HTTPS (一) 自動實現 sslHTTP
- java實現兩個文字相似度 simHash 實現Java
- Spring實現IOC容器的兩種實現方式Spring
- Python實現火柴人的設計與實現Python
- GO實現Redis:GO實現Redis叢集(5)GoRedis
- 簡單介紹numpy實現RNN原理實現RNN
- Docker實現服務發現Docker
- etcd實現服務發現
- android圖片裁剪拼接實現(二):觸控實現Android
- 從零實現Vue的元件庫(十六)- Dropdown 實現Vue元件
- 從零實現Vue的元件庫(九)- InputNumber 實現Vue元件
- 從零實現Vue的元件庫(二)- Slider 實現Vue元件IDE
- 從零實現Vue的元件庫(一)- Toast 實現Vue元件AST
- 從零實現Vue的元件庫(十二)- Table 實現Vue元件
- react全家桶實現招聘app-路由實現(二)ReactAPP路由
- 虛擬現實還需要多久才能真正的實現