關於Flux,Vuex,Redux的思考

關於Flux,Vuex,Redux的思考

Flux是一種前端狀態管理架構思想，專門解決軟件的結構問題。
基於Flux的設計思想，出現了一批前端狀態管理框架。
他們給出了一些庫用於實現Flux的思想，並在Flux的基礎上作了一些改進。
在這些框架裏，當前最熱門的莫過於Redux和Vuex了。
這裏是我對Flux,Vuex,Redux的一些思考和總結:

---

Flux

Flux數據流的順序是:

View發起Action->Action傳遞到Dispatcher->Dispatcher將通知Store->Store的狀態改變通知View進行改變

ps:基於Flux架構思想寫的一個小demo

Redux

Redux相對於Flux的改進：

• 把store和Dispatcher合併,結構更加簡單清晰

• 新增state角色，表明每一個時間點store對應的值，對狀態的管理更加明確

Redux數據流的順序是:

View調用store.dispatch發起Action->store接受Action(action傳入reducer函數,reducer函數返回一個新的state)->通知store.subscribe訂閱的從新渲染函數

ps:阮一峯老師的Redux+React小demo

Vuex

Vuex是專門爲Vue設計的狀態管理框架,
一樣基於Flux架構，並吸取了Redux的優勢

Vuex相對於Redux的不一樣點有:

• 改進了Redux中的Action和Reducer函數，以mutations變化函數取代Reducer，
  無需switch,只需在對應的mutation函數裏改變state值便可

• 因爲Vue自動從新渲染的特性，無需訂閱從新渲染函數，只要生成新的State便可

Vuex數據流的順序是:

View調用store.commit提交對應的請求到Store中對應的mutation函數->store改變(vue檢測到數據變化自動渲染)

ps:Vuex官方文檔上的小demo