React应用框架Dva数据流向原理总结分析

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/