使用dva框架的總結

最近的項目是react+dva+atd+webpack的一個後臺項目，剛接觸dva就感受很喜歡，很簡潔用着很爽。

關於使用redux中的一些問題

一、文件切換問題、

　　redux的項目一般喲啊分爲reducer、action、saga、component等等，咱們須要在文件之間來回切換，而且文件一般是分目錄存放：

+ src + sagas - user.js + reducers - user.js + actions - user.js

因此咱們要在幾個user.js中來回切換。

二、saga建立麻煩

　　在saga裏面監聽一個action一般這樣寫

function *userCreate() { try { // Your logic here
  } catch(e) {} } function *userCreateWatcher() { takeEvery('user/create', userCreate); } function *rootSaga() { yield fork(userCreateWatcher); }

對於redux-saga，這樣設計可讓實現更加靈活，但實際項目中，大部分場景只須要用到takeEvery和takeLatest就足夠了，每一個action的監聽都須要這麼寫就顯得有些冗餘。

三、enrty建立麻煩

除了redux store的建立，中間件的配置，路由的初始化。provider的store的綁定，saga的初始化，還要處理reducer、component、saga的HMR，看起來比較複雜

 

dva就是基於redux、redux-saga和react-router的輕量級前端框架

 

看下dva是如何來使用的

1、首先是定義路由，組成應用的不一樣頁面

　　定義路由組件，添加路由信息到路由表，編輯router.js

2、編寫UI組件

3、定義Model，處理數據和邏輯

　　經過model的概念吧一個領域的模型管理起來，包含同步更新state的reducers，處理異步邏輯的effects，訂閱數據源的subscriptions

4、connect起來

單獨完成了model和component，使用dva提供的connect方法，其實這個connect就是react-redux的connect

最好的學習方式就是本身先實現一個demo，有興趣在antd的文檔裏有，能夠動手敲一下

 

看一下幾個API來感覺下dva的框架思想

數據流向

數據的改變發生一般是經過用戶交互行爲或者瀏覽器的行爲（如路由跳轉等）觸發，能夠經過dispatch發起一個action，若是是同步行爲會直接經過Reducer改變state，若是異步行爲（反作用）會先觸發Effects，而後經過Reducer最終改變State，因此在dva中，數據流向很是清晰簡明

state表示Model的狀態數據，一般表現爲一個js對象

Action 是一個普通的js對象，他是改變state的惟一途徑。不管是UI事件，網絡回調，仍是webSocket等數據源所獲取的數據，最終都會經過dispatch函數調用一個action，從而改變對應數據。action必須帶有type屬性指明具體的行爲，其餘字段能夠自定義，若是發起一個action須要使用dispatch函數，dispatch是在組件connect Model之後，經過props傳入的dispatch函數，action是改變state的惟一途徑，可是他只是描述了一個行爲，dispatch能夠看作是觸發這個行爲的方式，而Reducer則是描述如何改變數據的

在dva中，connect Model的組件經過props能夠訪問到dispatch，能夠調用Model中的Reducer或者Effects，常見的形式

dispatch({ type: 'user/add', // 若是在 model 外調用，須要添加 namespace
  payload: {}, // 須要傳遞的信息
});

Reducer：接受兩個參數，以前累積運算的結果和當前想要被累積的值，返回的是累積的結果，reducer來自於函數式編程，reducer是純函數，不該該產生任何反作用，每次運算都是返回一個全新的數據

 

Effect： 被稱爲反作用，在應用中，最多見的就是異步操做。來自於函數編程的概念

 

Subscription：是一種從源獲取數據的方法，來自於elm（這裏就是做者說的來自於餓了麼的靈感啊），用於訂閱一個數據源，而後根據條件dispatch須要的action。數據源能夠是當前的事件，服務器的websocket鏈接，keyboard輸入，history路由變化等等。

 

Router：經過瀏覽器的History API能夠監聽瀏覽器url的變化，從而控制路由相關操做

 

Route Components：在dva中，一般須要connect Model的組件都是Route Components，組織在/routes/目錄下面，在/commponent/目錄下面則是純組件

 

參考資料

Atd+dva實戰

理解dva的8個概念