Ant Design中的dva流程梳理

功能

dva流程简单来说就是model层和view层的分离，数据的存储不放在组件的state中，单独拎出来放在model中。项目开发过程中个人感觉全局性数据（比如用户名，用户权限）可以采用这种方法实现。

本例中page层页面List.js负责显示，数据和更新数据的方法放在model层中的DataList.js中。实现效果如下：

代码

• page层：src/routes/List.js

import React from 'react';
//dva是1种分层想，将page(routes/List.js)和model(models/ListData.js)进行分层
//其中page只负责页面显示，数据在model中进行处理
import {
   connect} from 'dva';


const namespace = 'list';

//说明：第1个回调函数将page层和model层进行连接，返回model中的数据
//并且将返回的数据绑定到this.props中，下面通过this.props.dataList拿数据
//注意不是this.state.dataList
//第2个回调函数，将定义的函数绑定到this.props中，可以调用model层中定义的函数
//通过this.props.add()操作，不是this.state.add()

//*******************以下是第1种写法，直接把2个回调函数写入*******************
//dva的作用是connect model和page
//2个回调函数作为参数
//参数1：将page和model进行连接，返回modle中的数据，并且将返回的数据绑定到this.props
//参数2：将返回的函数绑定到this.props
@connect((state) => {
   //state是整个项目全局的state，通过命名空间获取指定的model的state
  return {
   //返回1个对象,将返回的值绑定到this.props中
    dataList: state[namespace].data,
    maxNum: state[namespace].maxNum
  }
}, (dispatch) => {
   //dispatch的作用：可以调用model层定义的函数
  return {
   //将返回的函数，绑定到this.props中
    add() {
   
      dispatch({
   
        type: 'list/addNewData'  //model的namespace + model中定义的函数名
      });
    },
    init: () => {
   //箭头函数写法
      dispatch({
   
        type: 'list/initData'
      });
    }
    //下面可以定义多个函数
  }
})
//*******************以上是第1种写法*******************