實作mini版redux
1. 理解redux模塊
1). redux模塊整體是一個物件模塊
2). 內部包含幾個函式
createStore(reducers) // reducers: function(state, action){ return newState}
combineReducers(reducers) // reducers: {reducer1, reducer2} 回傳: function(state, action){ return newState}
applyMiddleware() // 暫不實作
3). store物件的功能
getState() // 回傳當前state
dispatch(action) // 分發action: 呼叫reducers()得到新的總state, 執行所有已注冊的監聽函式
subscibe(listener) // 訂閱監聽: 將監聽函式保存起來
2. 實作代碼: src/libs/redux/index.js
/*
創建store物件的函式
*/
export function createStore(reducer) {
// 內部管理的state
let state
// 用來快取監聽的陣列容器
const listeners = []
// 初始呼叫reducer得到初始state值
state = reducer(state, {type: '@@mini-redux/INIT'})
/*
獲取當前狀態
*/
function getState() {
return state
}
/*
分發訊息
*/
function dispatch(action) {
// 呼叫reducer, 得到新的state
state = reducer(state, action)
// 呼叫監聽快取中的所有Listener, 通知狀態變化
listeners.forEach(listener => listener())
}
/*
訂閱監聽
*/
function subscribe(listener) {
// 將新的監聽添加到監聽快取容器中
listeners.push(listener)
}
// 向外暴露store物件
return {getState, dispatch, subscribe}
}
/*
合并多個reducer的函式
*/
export const combineReducers = (reducers) => {
// 回傳一個reduer宣告函式
return (state = {}, action) => {
// 回傳包含所有reducer狀態的總state物件
return Object.keys(reducers).reduce((preState, key) => {
// 呼叫對應的reducer函式得到對應的新state, 并保存到總state中
preState[key] = reducers[key](state[key], action)
return preState
}, {})
}
}
------------恢復內容結束------------
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/155322.html
標籤：JavaScript
上一篇：react-native構建基本頁面5---呼叫拍照攝像頭
下一篇：自定義React-redux