React+Redux的MVC方式

03-18

一直在說MVC，也知道其大體的定義，那具體是怎麼樣體現在自己的項目中呢？小編目前有一個React+Redux項目，我說說我理解的。

前提：讀者已經大致了解react+redux開發思路。

文章幫助工程師了解React+Redux模式下，Model（模型）、View（視圖）、Controller（控制器）之間的關係。

一、了解MVC

M-模型

模型用來存放應用的所有數據對象。實際開發中，從介面抓取的數據、用戶狀態信息均會放在這裡面。可通過控制器來篩選數據反饋給View層。

V-視圖

視圖層是呈現給用戶的，用戶與之產生交互。在JavaScript應用中，視圖大都是HTML、CSS、JavaScript模板組成的。除了模板中簡單的條件語句之外，視圖不應當包含任何其他邏輯。

C-控制器

控制器是模型和視圖之間的紐帶。控制器從視圖獲取事件和輸入，對它們（很可能包含模型）進行處理，並相應地更新視圖。當頁面載入時，控制器會給視圖添加事件監聽，比如監聽表單提交或按鈕點擊。然後，當用戶和你的應用產生交互時，控制器中的事件觸發器就開始工作了。

二、以前html+js的MVC模式寫法

只能舉例說明：需要給一個頁面上的button註冊一個onclick事件。

我們可以有如下最簡潔的寫法：（view和model control完全混合）

<html> <head> <title> example </title> </head> <body> <input type="button" value="baidu" onclick="alert(this.value);"/> </body></html>說明：如上寫法的好處：簡單、直接；嚴重的弊端：需要實現稍微複雜頁面功能的時候，會讓代碼變得超級亂，難以閱讀、維護。

符合MVC框架的實現：（view、mode和control完全分離）

view視圖的view.html代碼：<html> <head> <title> example </title> </head> <body> <input type="button" value="baidu" id="baidu"/> </body> <script src="model.js"></script> <script src="control.js"></script></html>實現control控制功能的control.js代碼：function G(id){ return document.getElementById(id);}var UI = new Object();UI.register = function(id,even,fun,arr){ if(G(id)) G(id)["on"+even] = function(){ fun(arr); };}UI.register("baidu","click",tipInfo,[1,2]);model.js代碼：function tipInfo(arr){ alert(arr[1]); //真正的業務邏輯處理 //實現其他組件功能，例如popup、form等。都屬於model模型}第一參數：為button節點id第二參數：為需要註冊的觸發事件第三參數：事件觸發函數第四參數：需要傳遞的參數。說明：control.js的代碼就是實現html頁面節點事件的註冊。使得節點的各種事件知道會觸發什麼函數去執行。具體的函數操作，可以放到model模塊中執行，在model中，才是真正處理邏輯操作。總結：View：只管頁面的顯示和樣式展示Control：進行頁面節點事件的註冊和控制，以及頁面載入性能的實現（例如方榮的硬碟緩存。Model：真正的邏輯處理，例如jslib庫中的form、popup、drag等功能組件都屬於model模塊。

三、React+Redux中的MVC

react作為視圖展示

使用redux註冊一個model（放數據的容器）
react只做View層展示，Component通過 redux 的connect鏈接代碼倉庫取數數據，在Component內部從props取數展示。
用來redux之後，Component 中的state，一般只做View控制狀態的狀態碼的儲存。

Redux API作為Model、Control層

Redux里的store里的state表示Model
Redux里的action和reducer表示Controller

項目MVC心得

實際開發，react作為View，它的state只儲存一些展示方面的狀態嗎，通過redux 的connect鏈接進去model。

import { connect } from react-redux假設有組件 TodoListexport defalut connect( mapStateToProps, mapDispatchToProps)(TodoList)//實際開發中，我並沒有傳mapDispatchToProps函數//同過connect函數，組件props可以得到dispatch函數，用於觸發action//mapStateToProps 負責輸入邏輯即將 state 映射到 UI 組件的參數（props）；//mapDispatchToProps 負責輸出邏輯，即將用戶對 UI 組件的操作映射成 Action。

在model中，state作為代碼倉庫，也就是Model層。
Redux里的action和reducer表示Controller

//頁面通過dispatch函數，觸發action進行數據請求，請求得到結果後觸發reducer去更改state數據。//也可直通過dispatch函數直接觸發reducer函數，更改state數據。

總結

關於網上react+redux中的MVC說法不一，我也是去學習借鑒別人的一些看法，根據自己的常模總結出來的，可能跟你的見解不一，歡迎指導。