redux原理
某公司有物流（actionType）、電商（actionType）、廣告（actionType）3塊業務，在公司財務系統（state）統一記錄三塊業務分別賺取的資金。某天，電商業務在公司電商平台銷售了價值100w的商品（action），賺取的資金透過發票（dispatch）的形式送到業務的財務部門，財務部門透過自己業務區塊，計算賺取到的利潤（reducer），再更新到財務系統（state）。
核心原理： 透過某個事件action把結果透過dispatch傳送到reducer，在reducer中，根據不同的actionType對資料做不同的業務處理，然後把最後的結果更新到state樹中。
由於的幾位老闆對公司的資金盯著很緊，要時刻關注資金的變化，於是，就設置了當資金有變動事件（subscribe），就發短信告訴他（listener）。
原理：redux透過內建了一個listeners數組，允許外部訂閱state資料變動事件，當state樹種的資料發生變化，就會通知所有的監聽事件。
API 解說
function createStore(reducer, preloadedState, enhancer)
createStore方法中，初始化了整個redux環境。 preloadedState作為state樹的初始值。此方法傳回了redux開放的接口，操作redux的state,只能透過返回來的api去操作。
createStore回傳回傳的api：
return {
dispatch,
subscribe,
getState,
replaceReducer,
[$$observable]: observable
}store.getState: 傳回目前redux維護的state物件;
# store.subscribe : 可以透過此介面註冊訂閱事件，也就是當redux的state被存取時（不管有沒有修改到state的資料），redux就會遍歷所有已註冊的事件。
function subscribe(listener) {
if (typeof listener !== 'function') {
throw new Error('Expected listener to be a function.')
}
let isSubscribed = true
ensureCanMutateNextListeners()
nextListeners.push(listener)
return function unsubscribe() {
if (!isSubscribed) {
return
}
isSubscribed = false
ensureCanMutateNextListeners()
const index = nextListeners.indexOf(listener)
nextListeners.splice(index, 1)
}
}store.dispatch: 在事件action運行後，透過dispatch把結果推送到reducer中。 action的結果必須是普通的js對象，必須包含一個type屬性，在reducer中可以依照type去對資料做不同的業務處理，然後更新到對應的state。
在reducer之後，無論資料有沒有發生變化，都會遍歷所有的監聽事件。
function dispatch(action) {
if (!isPlainObject(action)) {
throw new Error(
'Actions must be plain objects. ' +
'Use custom middleware for async actions.'
)
}
if (typeof action.type === 'undefined') {
throw new Error(
'Actions may not have an undefined "type" property. ' +
'Have you misspelled a constant?'
)
}
if (isDispatching) {
throw new Error('Reducers may not dispatch actions.')
}
try {
isDispatching = true
currentState = currentReducer(currentState, action)
} finally {
isDispatching = false
}
const listeners = currentListeners = nextListeners
for (let i = 0; i < listeners.length; i++) {
const listener = listeners[i]
listener()
}
return action
}整個單一頁面應用程式僅需呼叫1次createStore方法，然後確保初始化後的物件全域可用，這樣才能達到透過redux來統一管理資料。
以上是如何理解 redux的詳細內容。更多資訊請關注PHP中文網其他相關文章！
