dva中的model.ts-Toy模板网

这篇具有很好参考价值的文章主要介绍了dva中的model.ts。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

module.ts文件

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文件

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}/queryLevel`,
     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);

在后来，我创建了Ant Design Pro 的项目，发现项目里没有umi这个库，所以这个项目里使用models按照上边的写法就失效了。然后去官方文档找解决办法，发现在这里是另一种写法。这个方法没有connect()的连接。

使用的是 useModel()

首先，说明一下我的目录结构，models与page同级

dva中的model.ts,umijs,前端,开发语言,typescript

第一步：在models中创建ts文件

// models --> workplace.ts

import { useState } from 'react';

const workplace = () => {
  const [counter, setCounter] = useState(0);
  return { counter };
};

export default workplace

第二步：引用处，index.ts中

import {useModel} from "@@/exports";  

const workplace = useModel('workplace')
console.log("workplace",workplace)

dva中的model.ts,umijs,前端,开发语言,typescript

调用接口使用的 useRequest()

// models ---> workplace.ts

import { useState } from 'react';
import {homeinfo} from "@/services/index";
import {useRequest} from "ahooks";

const workplace = () => {
  const [counter, setCounter] = useState(0);

  const init = () => {
    homeinfo({
      // 传参写在这里
      // username: "admin",
      // passward: '123'
    }).then(res=>{

      // 成功的操作写在这里
      console.log("成功的res",res)
    }).catch()
  }
    
  // 调用接口
  const data = useRequest(init,{})
  console.log("data",data)

  return { counter };
};

export default workplace

dva中的model.ts,umijs,前端,开发语言,typescript