Redux
整個(gè)應(yīng)用只有一個(gè)Store：?jiǎn)我粩?shù)據(jù)源
Store.state不能直接修改（只讀）补箍，必須調(diào)用dispatch(action) => store.reducer => return newState
Action是一個(gè)對(duì)象，且必須具有type屬性啸蜜，用來(lái)告訴reducer執(zhí)行哪個(gè)操作
reducer必須是一個(gè)純函數(shù)坑雅，以此來(lái)保證相同的輸入必定是相同的輸出，確保返回的newState可預(yù)測(cè)可控
大型應(yīng)用中可以有多個(gè)reducer衬横，通過(guò)combineReducer 來(lái)整合成一個(gè)根reducer
-
Redux的大概流程：
// view中發(fā)出 Action store.dispatch(action) // store 自動(dòng)調(diào)用reducer裹粤，傳入當(dāng)前state和action let newState = xxxReducer(currentState, action) // state發(fā)生變化，store自動(dòng)調(diào)用監(jiān)聽(tīng)函數(shù) store.subsrcibe(listener) // listener可以通過(guò) store.getState() 得到當(dāng)前狀態(tài)蜂林。如果使用的是 React遥诉，這時(shí)可以觸發(fā)重新渲染 View function listerner() { let newState = store.getState(); component.setState(newState); }
Vuex
- 由 State + Muatations(commit) + Actions(dispatch) 組成
- 全局只有一個(gè)Store實(shí)例（單一數(shù)據(jù)源）
- Mutations必須是同步事務(wù)，Why?：不同步修改的話噪叙，會(huì)很難調(diào)試矮锈，不知道改變什么時(shí)候發(fā)生，也很難確定先后順序睁蕾，A苞笨、B兩個(gè) mutation，調(diào)用順序可能是 A -> B子眶，但是最終改變 State 的結(jié)果可能是 B -> A
- Actions 負(fù)責(zé)處理異步事務(wù)瀑凝，然后在異步回調(diào)中觸發(fā)一個(gè)或多個(gè)mutations，當(dāng)然臭杰，也可以在業(yè)務(wù)代碼中處理異步事務(wù)粤咪，然后在回調(diào)中同樣操作
- 模塊化通過(guò)module方式來(lái)處理，這個(gè)跟Redux-combineReducer類(lèi)似渴杆，在應(yīng)用中可以通過(guò)namespaceHelper來(lái)簡(jiǎn)化使用
對(duì)比Redux
Redux：
// view——>actions——>reducer——>state變化——>view變化（同步異步一樣）
Vuex：
// view——>commit——>mutations——>state變化——>view變化（同步操作）
// view——>dispatch——>actions——>mutations——>state變化——>view變化（異步操作）
總的來(lái)說(shuō)都是讓 View 通過(guò)某種方式觸發(fā) Store 的事件（mutation）或方法（reducer）射窒，Store 的事件或方法對(duì) State 進(jìn)行修改（state.xxx = xxx）或返回一個(gè)新的 State（return newState），State 改變之后将塑，View 發(fā)生響應(yīng)式改變（setState vs 數(shù)據(jù)劫持響應(yīng)式）。
