react项目 初始dva

在实际的react项目中，目前使用的react+dva的方式进行项目的构建
一些在dva中的小点进行第一篇dva 的整理
在实际的项目开发的过程中：models与servers是分开的文件夹，通常在models中会将server请求的方法在dva中进行引入

以下是一个models的文件

export default {
  namespace: 'msg',//namespace为当前models的命名空间，在@connect时会用到

  state: {//当前models的所有state
    msgTypeList: {
      list: [],
      pagination: {},
    },
    data:undefined
  },
  
	// effects是Action 处理器，Effect 是一个 Generator 函数，内部使用 yield 关键字，标识每一步的操作。
	//dva 提供多个 effect 函数内部的处理函数，比较常用的是 call 和 put。

  effects: {
    // 获取标签列表
    *getMsgLabelLsitByObj({ payload, callback }, { call, put }) {
      const response = yield call(getMsgLabelLsitByObj, payload);//getMsgLabelLsitByObj为函数名，call为一步函数

      if(response.status=="ok"){
        message.success('查询成功',2);
        yield put({//发出一个 Action,type：reducers中的方法的名称，payload：这个action要传递的数据
          type: 'save',
          payload: response,
        });
        if (callback) callback(response);
      }else{
        message.error('查询失败',2)
      }
    },
 
    //  编辑标签
    *updateMsgLabel({ payload, callback }, { call, put }) {
      const response = yield call(updateMsgLabel, payload);
      if(response.status=="ok"){
        message.success('修改成功',2);
        if (callback) callback(response);
      }else{
        message.error('修改失败',2)
      }
    },
  },
//reducers：通过action中接收到的值与当前model中的state，计算输出新的state
  reducers: {
    save(state, action) {//state：当前的model中的原本的state，action：接收payload传递过来的数据
      let dataList= {
        list: action.payload.data.data.list,
        pagination: {
          current:action.payload.data.data.pageNum,
          pageSize:action.payload.data.data.pageSize,
          total:action.payload.data.data.total
        },
      }
      return {
        ...state,
        data: action.payload,
        msgTypeList:dataList
      };
    },
  },
};

在组件中的使用

import { connect } from 'dva';
/* msg:为model中namespace的名字 */
@connect(({ msg, loading }) => ({
  msg,
  loading: loading.models.rule,
}))

在某个方法里面使用dispatch

const { dispatch } = this.props;
dispatch({
  type: 'msg/getMsgPushList',//msg:为model中namespace的名字 ，getMsgPushList：model中的effect中的某一个函数名
  payload:{//payload：这里的作用是传递参数
    pushTime:flagVal==0?'':pushTimeVal,
    keyword:flagVal==0?'':keywordVal,//关键字
    label:flagVal==0?'':labelVal,//标签
    pageNum :1,
    pageSize :10
  },
  callback:response=>{
    _this.setState({
      successFlag:true,
    })
  }
});