阿里react整合庫dva demo分析

 

前言

因工做須要，最近在努力學習react全家桶相關內容，最近發現阿里有個dva項目，是基於redux,redux-sage和react-router 的一個輕量級框架，跟着網上一個整合demo坐下來後，打算寫一下整個系統的分析，以備往後查看。

系統分析

概述

整個項目使用 react+dva+antd 的技術棧，主要實現了一個CURD 的應用。功能不復雜，主要是熟悉這個技術棧的思惟方式。

入口

項目的入口文件爲 index.js文件。 在該文件中首先實例化一個dva應用，而後設置該應用的model和router，最後啓動（start） 在model中主要用來編寫整個應用的業務邏輯，包括redux的整個流程，同步、異步獲取數據等操做。 在router中底層應該是使用了react-router來負責整個系統的路由，而後在路由中配置各自路由對應的頁面，也就是組件（components）

model

model相似於mvc結構中控制器的角色，其中主要有五個配置項。

1. namespace
   model 的命名空間，同時也是他在全局 state 上的屬性，只能用字符 串，不支持經過 . 的方式建立多層命名空間。
2. state
   state的初始值，優先級低於傳給 dva() 的 opts.initialState。
3. reducers key/value 格式定義 reducer，用於處理同步操做，惟一能夠修改 state 的地方。由 action 觸發
4. effects
   以 key/value 格式定義 effect。用於處理異步操做和業務邏輯，不 直接修改 state。由 action 觸發，能夠觸發 action，能夠和服務 器交互，能夠獲取全局 state 的數據等等。
5. subscrip
   以 key/value 格式定義 subscription。subscription 是訂 閱，用於訂閱一個數據源，而後根據須要 dispatch 相應的 action。在 app.start() 時被執行，數據源能夠是當前的時間、服 務器的 websocket 鏈接、keyboard 輸入、geolocation 變化、 history 路由變化等等。

簡單來講，就是在state中設置初始化的組件狀態，在reduce中處理同步的action，在effect中處理異步的action，併發出同步的action去更新state。最後能夠在subscrip中添加事件監聽等操做。

service

service 模塊負責的內容同一班意義上的同樣，就是用來獲取數據的服務，能夠把跟服務器通信的代碼放到這裏來。

router

配置路徑對應的組件，也就是不一樣路徑下展現不一樣的頁面。

組件

一個常規的react，用來將model中的state映射到組件的prop上並展現。

後記

整個dvademo看下來，對於一個比較熟悉react全家桶的人來講，相對於原來那一套redux+redux-saga+react確實簡化許多，但若是不是很熟悉上面提到的那些東西，看這個demo的時候可能會一頭霧水。 總而言之，dva大大方便了熟手的開發進度，減小了煩冗的代碼，可是學習曲線仍是過於陡峭，不是很適合上手。

參考 【https://github.com/dvajs/dva/blob/master/docs/API_zh-CN.md#model】 【https://github.com/sorrycc/blog/issues/18】