Redux、Flux、Vuex

joy968 發布于2019-08-21 14:35 / 3165人閱讀

摘要：結構和數據流一個單向數據流是模式的核心，上面示圖應該是程序員心中主要的模型圖。

前言

這篇文章不會用具體的代碼去闡述redux、flux或者vuex，因為我覺得它們所帶來的更是一種編程思想。

前端進化和框架演變

在很久以前，前端沒有MVVM的概念，MVVM是對MVC細化的說法（個人覺得兩者區別不大），MVC的模式一直在后臺使用，效果和優點都很明顯。

后來前端工程師仿照MVC模式開發了很多框架出來：backbonejs、angularjs、emberjs、knockoutjs等等。

再后來nodejs的崛起，出現了reactjs、vuejs、avalonjs,都是主打組件化，讓數據來驅動視圖，再配合像grunt和webpack前端工具更是讓前端步入新的時代。

其實這里我想吐槽一下，前端從以前把注意力集中在布局和樣式，轉變成把精力投入到學習這些思想、工具、框架中，我做為一個前端工程師在這種過渡中覺得是一種力不從心（可能年齡大了，es6普及后不知道還要了解多少新東西），雖然是一個把注意力從視圖轉到數據上的轉變，但這過程其實要付出的挺多。

好，廢話到此為止。

Redux 思想

Redux讓你以一種新的方式思考開發應用個，這個方式是：狀態從一個初始狀態開始，被一系列動作序列改變，這種新方式是通往復雜Web應用的捷徑。

這么一說，很多人一頭霧水，啥意思？下面來個簡單代碼

var store = {
  state: {
    message: "Hello!"
  },
  actionA: function () {
    this.state.message = "action A triggered"
  },
  actionB: function () {
    this.state.message = "action B triggered"
  }
}
//如果你想改變message的值，你可以調用actionA或者actionA去實現。

上面這段代碼可以說就是Redux思想最簡單的體現。

Flux

Flux是Facebook用戶建立客戶端Web應用的前端架構，它通過利用一個單向的數據流補充了React的組合視圖組件，這更是一種模式而非正式框架，你能夠無需許多新代碼情況下立即開始使用Flux

Flux應用有三個主要部分：Dispatcher調度 、存儲Store和視圖View(React 組件)，這些不應該和MVC:Model-View-Controll(模型-視圖-控制器)混淆，控制器在Flux應用中是存在的，但是他們是controller-view(控制器-視圖)，視圖通常在一個結構頂部，而這種結構是用來從存儲stroe獲得數據，然后將數據傳遞到自己的子結構們，此外，Action創建者-Dispatcher的幫助類的方法 -用于支持一個語義API，這個API是描述應用程序中所有變化的可能，通常可將它們看成是Flux更新循環的第四部分。

Flux是以單向數據流方式支持MVC，當一個用戶和React視圖交互時，視圖會將這個動作傳播到一個中央Dispatcher，一直到各種存儲，在那里保存著應用的數據和業務邏輯，這個使用React的聲明式風格的過程是非常棒的，能夠允許存儲發送更新信息，而無需指定在狀態之間如何切換視圖。(傳統方式更新狀態后，會推出一個新的視圖頁面。)

Flux最初是用于正確導出數據，比如如果我們要顯示一系列消息的未讀數字，而另外一個視圖顯示的是所有消息，其中未讀的消息會高亮顯示。這種情況使用MVC很難處理，將一個消息變為已讀狀態需要更新消息模型，然后再需要更新未讀的計數模型(將未讀模型數字減1，因為剛發生一個已讀改變)，這種依賴和級聯更新經常發生在大型MVC應用，導致一個混亂的數據流編織和不可預知的結果。

控制器被存儲反轉控制：存儲接受更新，適當地調節這些更新，而不是一致地依賴外部更新其數據，存儲之外根本不知道它是如何管理領域數據的，這有助于實現一種清晰的分離關注。存儲并沒有直接的類似setAsRead()之類的方法，而是只有一個單一方式獲取數據到其自成一體的世界中，這個方式就是回調，注冊在dispatcher中的callback。

結構和數據流

一個單向數據流是Flux模式的核心，上面示圖應該是Flux程序員心中主要的模型圖。dispatcher 存儲和視圖是有著不同輸入輸出的獨立節點，Action動作是一個簡單對象，只是包含新的數據和一個標識符類型的屬性。

視圖也許引起新的動作Action，這個動作作為用戶交互的響應將在整個系統傳播：

所有通過dispatcher的數據流將作為一個集中式Hub，動作Action在一個action creator方法中被提供給dispatcher，這個動作通常來自于視圖中用戶的交互，dispatcher然后調用存儲已經注冊其中的回調函數，分發Action動作到所有的存儲，在它們注冊的回調函數中，存儲會響應每個和它保存的狀態有關的每個動作Action，存儲然后發射一個 change改變的事件去提醒controller-view（控制器-視圖），更新到剛剛改變的新數據。controller-view監聽這些事件，然后在一個事件處理器中從存儲中獲取數據，controller-view調用它們自己的"setState()"方法，這會觸發視圖的重新渲染，包括DOM組件樹中所有更新

通過應用的數據流是一個方向，沒有兩邊綁定(two-way bingding：Angular.js有此方式)，應用狀態在存儲中維護，允許應用不同部分保持解耦，在存儲之間發生依賴的地方，它們能夠保持嚴格的層次關系（設計原則：盡量松耦合，無法回避的就變成樹形層次結構），同步管理由dispatcher負責。

說了那么多，重點還是上面兩張圖，知道了這個流程，就掌握了它的大概思想，如果你還是不懂，這里分享個人認為比較好的文章：

怎樣理順react，flux，redux這些概念的關系，開發中有必要使用它們嗎?

Redux 介紹

關于Vuex的幾個疑問

vuex介紹

[譯] Flux 入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87955.html

關于Flux,Vuex,Redux的思考

摘要：關于的思考是一種前端狀態管理架構思想，專門解決軟件的結構問題。他們給出了一些庫用于實現的思想，并在的基礎上做了一些改進。在這些框架里，當前最熱門的莫過于和了。關于Flux,Vuex,Redux的思考 Flux是一種前端狀態管理架構思想，專門解決軟件的結構問題。基于Flux的設計思想，出現了一批前端狀態管理框架。他們給出了一些庫用于實現Flux的思想，并在Flux的基礎上做了一些改進。...

jsbintask 2019-08-22 10:48 評論0 收藏0
Flux,Vuex,Redux

摘要：是一種前端狀態管理架構思想，專門解決軟件的結構問題。基于的設計思想，出現了一批前端狀態管理框架。他們給出了一些庫用于實現的思想，并在的基礎上做了一些改進。在這些框架里，當前最熱門的莫過于和了。 Flux Flux是一種前端狀態管理架構思想，專門解決軟件的結構問題。基于Flux的設計思想，出現了一批前端狀態管理框架。他們給出了一些庫用于實現Flux的思想，并在Flux的基礎上做了一些改...

anonymoussf 2019-08-22 15:58 評論0 收藏0
Vuex、Flux、Redux、Redux-saga、Dva、MobX

摘要：也就是說不應該有公開的，所有都應該是私有的，只能有公開的。允許使用方法設置監聽函數，一旦發生變化，就自動執行這個函數。用一個叫做的純函數來處理事件。可以通過得到當前狀態。在中，同步的表現就是發出以后，立即算出。這篇文章試著聊明白這一堆看起來挺復雜的東西。在聊之前，大家要始終記得一句話：一切前端概念，都是紙老虎。不管是Vue，還是 React，都需要管理狀態（state），比如組件之...

hiYoHoo 2019-08-23 14:08 評論0 收藏0
react之redux狀態管理

摘要：傳統框架的缺陷傳統框架的缺陷模型視圖控制器的縮寫即視圖用戶看到并與之交互的界面。即模型是管理數據很多業務邏輯都在模型中完成。在的三個部件中，模型擁有最多的處理任務。所有的狀態，保存在一個對象里面唯一數據源。1、傳統MVC框架的缺陷模型(model)－視圖(view)－控制器(controller)的縮寫 V即View視圖：用戶看到并與之交互的界面。 M即Model模型是管理數...

J4ck_Chan 2021-11-19 11:29 評論0 收藏0
react-redux 開發實踐與學習分享

摘要：簡介是一個狀態管理的庫，由基礎上開發出來，與的主要區別是只有一個，關于，后文會詳述。這個函數接受四個參數，它們分別是，，和。之前在注冊頁面，如果沒有滿足相關條件，則觸發的行為。具體定義了項目中觸發的行為類別，通過屬性來區別于不同的行為。 redux簡介 redux是一個js狀態管理的庫，由flux基礎上開發出來，與flux的主要區別是只有一個store，關于store，后文會詳述。在各...

imccl 2019-08-21 16:42 評論0 收藏0