在剛剛接觸Dva時，我最想知道的第一個問題就是：
1. Dva是什麼？
Dva官網文檔的介紹是：
dva 是體驗技術部開發的 React 應用框架，將上面三個 React 工具庫包裝在一起，簡化了 API，讓開發 React 應用更加方便和快捷。
dva = React-Router + Redux + Redux-saga
説實話這些名詞讓我只能一個一個的百度，雖然不能説毫無收穫，但是依然難以理解。
現在我的理解Dva是一個輕量化的數據流向方案。
既然説是數據流向方案，那就應該先看數據流向的流程圖嘛，但是在我看到官網的流程圖後，發現對於第一次接觸Dva的我來説，確實無異於“天書”。
2. 流程圖怎麼看？其中的單詞代表的又是什麼意思呢？
參考最近接觸到的項目中使用的Dva流程和官網文檔給出的解釋，再次進行梳理。
①首先，當一個頁面發生一個行為，如：用户交互行為或者頁面跳轉時通常會發生數據的改變，此時dispatch函數會調用一個action，從而使數據發生改變。
dispatch 函數
dispatching function 是一個用於觸發 action 的函數，action 是改變 State 的唯一途徑，但是它只描述了一個行為，而 dipatch 可以看作是觸發這個行為的方式，而 Reducer 則是描述如何改變數據的。
常見的形式如：dispatch({//dispatch函數具有type,payload兩個參數 type: 'user/add', // type是用於找到與渲染層所連接@connet的Model層。 payload: {}, // payload中存放的是訪問API所需的參數傳遞給Model。 });需要注意的是 dispatch 是在組件 connect Models以後，通過 props 傳入的。
`const { dispatch } = this.props;`②在 Dva 中，可以通過@connect組件來實現View層與Model層的綁定。
dispatch可以調用 Model 中的 Reducer 或者 Effects（對於同步行為則直接調用Reducer來改變State，如果是異步行為則先觸發Effects（副作用）然後流向Reducer最終改變State）來改變State。
@connect(({ namespace,loading }) => ({//namespace為Model的一個屬性用於識別Model，
其中整個頁面的State是由許多Model以namespace為key合成State。
namespace,
loading
}))以上是在頁面的js文件中所需做的介紹，當dispatch調用刀Model頁面時：
③在接觸Dva這幾天，使用到了Model對象所具有以下幾種屬性：
（1）namespace：前面提到過相當於全局State中的key。
`namespace: 'historyScoreServiceModel'`（2）state：表示 Model 當前的狀態數據。
state: {
reportData: [],
workData: [],
report: '',
reportUrl:''
},State
State 表示 Model 的狀態數據，通常表現為一個 javascript 對象（當然它可以是任何值）；操作的時候每次都要當作不可變數據來對待，保證每次都是全新對象，沒有引用關係，這樣才能保證 State 的獨立性，便於測試和追蹤變化。
（3）effect：在使用過程中其中存放着dispatch所需調用的函數。在使用過程中通過yield call函數調用了server層發送Ajax請求的函數，返回的數據。call的第一個參數是你要調用的函數，第二個參數開始是你要傳遞的參數。然後對於返回的數據通過yield put的type屬性調用調用一個方法並將獲取到的State作為參數傳入tpye屬性所調用的函數中。
effects: {
*getHistoryScore({ payload }, { call, put }) {
const response = yield call(調用的server層的函數， 傳入的參數);
console.log(response)//返回的數據
yield put({
type: 'save',//調用的save方法
payload: {
reportUrl: response
},
});
},
},（4）reducers：用於數據合併。
在 dva 中，reducers 聚合積累的結果是當前 model 的 state 對象。通過 actions 中傳入的值，與當前 reducers 中的值進行運算獲得新的值（也就是新的 state）。需要注意的是 Reducer 必須是純函數，所以同樣的輸入必然得到同樣的輸出，它們不應該產生任何副作用。
reducers: {
save(state, { payload }) {//save函數傳入兩個參數一個是原State，一個是新數據，save函數用於將兩者擴展合併。
return {
...state,
...payload,
};
},
},④Ajax請求是在effect中通過調用server層的函數，函數體中通過ruquest函數發送Ajax請求，從ApI獲取數據。
至此，數據的獲取，到拼接到State最終渲染到頁面的dva的完整流程就OK了。
現在再來理解一下dva官方文檔的數據流程介紹吧。
數據流向
數據的改變發生通常是通過用户交互行為或者瀏覽器行為（如路由跳轉等）觸發的，當此類行為會改變數據的時候可以通過 dispatch 發起一個 action，如果是同步行為會直接通過 Reducers 改變 State ，如果是異步行為（副作用）會先觸發 Effects 然後流向 Reducers 最終改變 State，所以在 dva 中，數據流向非常清晰簡明，並且思路基本跟開源社區保持一致。
參考文獻：
- DvaJS官方文檔：https://dvajs.com/guide/
理解尚淺，望不吝賜教！
