dva中的model.ts - 技术栈

module.ts文件

TypeScript 复制代码

import {Effect,Reducer} from "umi"
import * as service from './service';


const MODEL_NAME = 'pastureDashboard'; // 注意这里的name值，将来index调用的时候用

// 定义类型
export interface modelState {
  pastureList: any,
}

// 初始化数据
const initState: modelState = {
  pastureList: [],  
}

// 定义module中的操作
export interface PastureBoardType {
  namespace: string; // 这里的命名空间就是展示页面得到数据的键
  state: modelState;  // 参数
  effects: {
    // 包含的方法名---请求接口的方法
    queryLevel: Effect;
  };
  reducers: {
    // 包含的方法名---请求接口后，修改上边初始化数据的内容
    // yiele put({type: 'save',})
    // type里的名字就是这里的名字
    save: Reducer
  },
}



const Model: PastureBoardType = {
  namespace: MODEL_NAME,
  state: {...initState},

  // 异步操作
  effects: {
    /*
    * 函数前的*不可丢，相当于 async...await的使用
    * 固定的三个参数  { payload }, { call, put }
    * payload: 请求接口传递过来的参数
    * call： 调用接口的方法  
    *   yield call('请求的地址',参数)
    * put： 成功后修改数据的方法
    *   yield put(type: '这里的值和reducers中定义的名字要一样')
    * */
    *queryLevel({ payload }, { call, put }) {
      const params = {
        ...payload
      }
      const {data} = yield call(service.queryInit, params)
      if(data) {
      yield put({
          type: 'save',
          payload: {
            pastureList: data
          },
        })
      }
    },
  },

  // 同步
  reducers: {
    // model中的数据、传过来的参数
    save(state,{payload}): modelState {
      return {
        ...state,   // 返回state中有的数据
        ...payload  // 修改对应数据
      }
    }
  },
}

export default Model;

index.ts文件

TypeScript 复制代码

import { connect } from 'umi';
import { Dispatch } from '@@/plugin-dva/connect';

interface Props {
  dispatch: Dispatch;
}

const Pasture: React.FC<Props> = (props)=>{
  const {dispatch} = props
  const MODEL_NAME = 'pastureDashboard';    // module中的namespace
  const {pastureList} = props[MODEL_NAME]   // 获取module中的值
}

const queryInit = function () {
  /**
  * 调用module中的方法
  * type: 是在module中 namespace + effect中的名字
  * payload:{} 调用接口需要的传参
  * */
  dispatch({
     type: `${MODEL_NAME}/queryMilk4level`,
     payload: {
       ...data
      },
    });
  }
}

// 调用完接口后在这里打印查看结果
console.log('pastureList',pastureList)


/**
* index文件 关联 module文件
* 函数里的参数是 module 中的 namespace
* export default connect(({ namespace }) => ({ namespace }))();
* export default connect()(这个index的导出名字)
*/
export default connect(({ pastureDashboard }) => ({
  pastureDashboard,
}))(Pasture);