React Umi 集成 Dva框架簡化數據傳輸流向原理篇

一、基本概念

dva 首先是一個基於 redux 和 redux-saga 的數據流方案，然後爲了簡化開發體驗，還額外內置了

react-router 和 fetch，所以也可以理解爲一個輕量級的應用框架。

• 易學易用，僅有 6 個 api，對 redux 用戶尤其友好，配合 umi 使用後更是降低爲 0 API
• elm 概念，通過 reducers, effects 和 subscriptions 組織 model
• 插件機制，比如 dva-loading 可以自動處理 loading 狀態，不用一遍遍地寫 showLoading 和 hideLoading
• 支持 HMR，基於 babel-plugin-dva-hmr 實現 components、routes 和 models 的 HMR
   

個人理解 ：簡化了React的setState跨組件傳輸數據的耦合，數據通過mapStateToProps

就可以共享數據，並且比Redux傳輸數據操作要更簡單，可以自動處理等待狀態，如果會

Redux入門可以更迅速 ，更快的上手。

二、代碼詳解

可以通過  npm install  dva-cli  或  yarn add dva-cli 安裝

創建model文件夾和viewer.js

export default {

  namespace: "viewer",

  state: {
    cesiumViewer:undefined
  },

  subscriptions: {
    setup({ dispatch, history }) {  // eslint-disable-line
    },
  },
  effects: {
    * fetch({ payload }, { call, put }) {  // eslint-disable-line
      yield put({ type: "save" });
    }
  },
  reducers: {
    /**
     *
     * @param {*}state 狀態
     * @param {*}action 動作
     * @returns {*} 結果
     */
    save(state, action) {
      return { ...state, ...action.payload };
    },
    /**
     *
     * @param {*}state 狀態
     * @param {*}action 動作
     * @returns {*} 結果
     */
    changeAction(state, action){
      return { ...state, ...action.payload };
    }
  },
}

namespace:可以通過空間名找到對應的model下的 viewer.js
state: {cesiumViewer:undefined} 存儲共享的數據
subscriptions:常用來監聽瀏覽器地址輸入的參數
effects:異步處理
reducers:同步處理
save:自定義方法裏的 state爲當前的數據，action.payload爲傳過來要改變的數據

調用save方法只需要用  dispatch type類型爲 namespace(viewer) 和自定義方法名(save)  payload 傳遞改變的參數

    this.props.dispatch({
      type: "viewer/save",
      payload: {
        cesiumViewer:123456
      },
    });

save 加上回調和異常處理則爲

    this.props.dispatch(
      {
        type: "viewer/save",
        payload: {
           cesiumViewer:123456
        },
        callback:(result)=>{
          console.log(result)
        },
        errorcallback:()=>{
          message.warning("服務異常");
        }
      }
    )

需要拿到共享參數則爲 this.props.viewer.cesiumViewer 就可以拿到 viewer 空間下的共享數據

function mapStateToProps(state) {
  return {
    viewer:state.viewer,
  };
}
export default connect(mapStateToProps)(綁定的class);

三、Dva原理圖

數據的改變發生通常是通過用戶交互行爲或者瀏覽器行爲（如路由跳轉等）觸發的，當此類行爲會改變數據的時候可以通過 dispatch 發起一個 action，如果是同步行爲會直接通過 Reducers 改變 State ，如果是異步行爲（副作用）會先觸發 Effects 然後流向 Reducers 最終改變 State，所以在 dva 中，數據流向非常清晰簡明，並且思路基本跟開源社區保持一致（也是來自於開源社區）。

個人理解：通過URL調用渲染組件初始化dom的時候，會通過connect(mapStateToProps) 加載共享數據，並且調用dispatch會觸發action 進行同步或異步操作或者監聽地址欄是否傳入參數的處理。