Dva是什么？

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

Dva官網(wǎng)文檔的介紹是：

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

dva = React-Router + Redux + Redux-saga

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

流程圖怎么看？

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

參考最近接觸到的項目中使用的Dva流程和官網(wǎng)文檔給出的解釋，再次進行梳理。

首先，當(dāng)一個頁面發(fā)生一個行為，如：用戶交互行為或者頁面跳轉(zhuǎn)時通常會發(fā)生數(shù)據(jù)的改變，此時dispatch函數(shù)會調(diào)用一個action，從而使數(shù)據(jù)發(fā)生改變。

** dispatch 函數(shù)** dispatching function 是一個用于觸發(fā) action 的函數(shù)，action 是改變 State 的唯一途徑，但是它只描述了一個行為，而 dipatch 可以看作是觸發(fā)這個行為的方式，而 Reducer 則是描述如何改變數(shù)據(jù)的。 常見的形式如：

dispatch({//dispatch函數(shù)具有type,payload兩個參數(shù)
type: 'user/add', // type是用于找到與渲染層所連接@connet的Model層。
payload: {}, // payload中存放的是訪問API所需的參數(shù)傳遞給Model。
});

需要注意的是 dispatch 是在組件 connect Models以后，通過 props 傳入的。 const { dispatch } = this.props;

在 Dva 中，可以通過@connect組件來實現(xiàn)View層與Model層的綁定。 dispatch可以調(diào)用 Model 中的 Reducer 或者 Effects（對于同步行為則直接調(diào)用Reducer來改變State，如果是異步行為則先觸發(fā)Effects（副作用）然后流向Reducer最終改變State）來改變State。

@connect(({ namespace,loading }) => ({//namespace為Model的一個屬性用于識別Model，
其中整個頁面的State是由許多Model以namespace為key合成State。
  namespace,
  loading
}))

以上是在頁面的js文件中所需做的介紹，當(dāng)dispatch調(diào)用刀Model頁面時：

Model對象屬性

在接觸Dva這幾天，使用到了Model對象所具有以下幾種屬性：

（1）namespace：前面提到過相當(dāng)于全局State中的key。 namespace: 'historyScoreServiceModel'

（2）state：表示 Model 當(dāng)前的狀態(tài)數(shù)據(jù)。

state: {
    reportData: [],
    workData: [],
    report: '',
    reportUrl:''
  },

State State 表示 Model 的狀態(tài)數(shù)據(jù)，通常表現(xiàn)為一個 javascript 對象（當(dāng)然它可以是任何值）；

操作的時候每次都要當(dāng)作不可變數(shù)據(jù)來對待，保證每次都是全新對象，沒有引用關(guān)系，這樣才能保證 State 的獨立性，便于測試和追蹤變化。

（3）effect：在使用過程中其中存放著dispatch所需調(diào)用的函數(shù)。在使用過程中通過yield call函數(shù)調(diào)用了server層發(fā)送Ajax請求的函數(shù)，返回的數(shù)據(jù)。call的第一個參數(shù)是你要調(diào)用的函數(shù)，第二個參數(shù)開始是你要傳遞的參數(shù)。然后對于返回的數(shù)據(jù)通過yield put的type屬性調(diào)用調(diào)用一個方法并將獲取到的State作為參數(shù)傳入tpye屬性所調(diào)用的函數(shù)中。

  effects: {
  *getHistoryScore({ payload }, { call, put }) {
    const response = yield call(調(diào)用的server層的函數(shù)， 傳入的參數(shù));
    console.log(response)//返回的數(shù)據(jù)
    yield put({
      type: 'save',//調(diào)用的save方法
      payload: {
        reportUrl: response
      },
    });
  },
  },

（4）reducers：用于數(shù)據(jù)合并。

在 dva 中，reducers 聚合積累的結(jié)果是當(dāng)前 model 的 state 對象。通過 actions 中傳入的值，與當(dāng)前 reducers 中的值進行運算獲得新的值（也就是新的 state）。

需要注意的是 Reducer 必須是純函數(shù)，所以同樣的輸入必然得到同樣的輸出，它們不應(yīng)該產(chǎn)生任何副作用。

  reducers: {
    save(state, { payload }) {//save函數(shù)傳入兩個參數(shù)一個是原State，一個是新數(shù)據(jù)，save函數(shù)用于將兩者擴展合并。
      return {
        ...state,
        ...payload,
      };
    },
  },

Ajax請求是在effect中通過調(diào)用server層的函數(shù)，函數(shù)體中通過ruquest函數(shù)發(fā)送Ajax請求，從ApI獲取數(shù)據(jù)。

至此，數(shù)據(jù)的獲取，到拼接到State最終渲染到頁面的dva的完整流程就OK了。 現(xiàn)在再來理解一下dva官方文檔的數(shù)據(jù)流程介紹吧。

數(shù)據(jù)流向

數(shù)據(jù)的改變發(fā)生通常是通過用戶交互行為或者瀏覽器行為（如路由跳轉(zhuǎn)等）觸發(fā)的，當(dāng)此類行為會改變數(shù)據(jù)的時候可以通過 dispatch 發(fā)起一個 action，如果是同步行為會直接通過 Reducers 改變 State ，如果是異步行為（副作用）會先觸發(fā) Effects 然后流向 Reducers 最終改變 State，所以在 dva 中，數(shù)據(jù)流向非常清晰簡明，并且思路基本跟開源社區(qū)保持一致。

參考文獻：

DvaJS官方文檔：https://dvajs.com/guide/