redux vuex 比較 --追加 mobx

redux：

單向數據流圖:

 

交叉流程圖:

 

 

reducer是一個純函數，用於接收原 state tree 和 action 做爲參數，並生成一個新的 state tree 代替原來的。

redux不會修改任何一個 state，而是用新生成的 state 去代替舊的，由於應用了不可變數據（Immutable Data）。

Redux 的工做方式遵循了嚴格的單向數據流原則，整個生命週期爲：

• View 調用 store.dispatch，並傳入 action 對象。action 對象是一個描述變化的普通對象
• 接下來，store 會調用註冊 store 時傳入的 reducer 函數，並將當前的 state 和 action 做爲參數傳入，在 reducer 中，經過計算獲得新的 state 並返回。
• store 將 reducer 生成的新 state 樹保存下來，而後就能夠用新的 state 去生成新的視圖。

 ------------------------------------------------------------------------------------------------------------------------------------

Mobx：

 

 --------------------------------------------------------------------------------------------------------------------------------------

Vuex：

Vuex 中沒有 reducer 來生成全新的 state 來替換舊的 state，Vuex 中的 state 是能夠被修改的。

即，以 mutations 變化函數取代 Reducer，無需 switch ，只需在對應的 mutation 函數裏改變 state 值便可。

一個 mutation 是由一個 type 和與其對應的 handler 構成的，type 是一個字符串類型用以做爲 key 去識別具體的某個 mutation，handler 則是對 state 實際進行變動的函數。

​ 在 Vuex 中能夠記錄每次 state 改變的具體內容，state 的變動可被記錄與追蹤。

Vuex 中的 action 也是 store 的組成部分，它能夠被當作是鏈接視圖與 state 的橋樑，它會被視圖調用，並由它來調用 mutation handler，向 mutation 傳入 payload。