Dva是什么？

在剛剛接觸Dva時，我最想知道的第一個問題就是：

Dva官網文檔的介紹是：

dva 是體驗技術部開發的 React 應用框架，將上面三個 React 工具庫包裝在一起，簡化了 API，讓開發 React 應用更加方便和快捷。

dva = React-Router + Redux + Redux-saga

說實話這些名詞讓我只能一個一個的百度，雖然不能說毫無收獲，但是依然難以理解。 現在我的理解Dva是一個輕量化的數據流向方案。 既然說是數據流向方案，那就應該先看數據流向的流程圖嘛，但是在我看到官網的流程圖后，發現對于第一次接觸Dva的我來說，確實無異于“天書”。

流程圖怎么看？

其中的單詞代表的又是什么意思呢？

參考最近接觸到的項目中使用的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頁面時：

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/