1.基本介绍

包含以下功能

• 内置 dva，默认版本是^2.6.0-beta.20，如果项目中有依赖，会优先使用项目中依赖的版本。
• 约定式的 model 组织方式，不用手动注册 model
• 文件名即 namespace，model 内如果没有声明 namespace，会以文件名作为 namespace
• 内置 dva-loading，直接 connectloading字段使用即可
• 支持 immer，通过配置immer开启

  约定式的 model 组织方式

  符合以下规则的文件会被认为是 model 文件，
• src/models下的文件
• src/pages下，子目录中 models 目录下的文件
• src/pages下，所有 model.ts 文件

比如：

• src + models/a.ts + pages + foo/models/b.ts + bar/model.ts 其中a.ts，b.ts和model.ts如果其内容是有效 dva model 写法，则会被认为是 model 文件。

2.使用

2.1创建ui组件

//pages/tag.tsx
//创建ui组件
import React, { FC } from 'react';
import { connect } from 'umi';
import { Button } from 'antd';
type Iprops = {
  tag: any;
};
const Tag: FC<Iprops> = (props) => {
  const getHttpHandle = () => {
    const { dispatch }: any = props;
    //使用model,更新数据
    dispatch({
      //调用命名空间的某个方法
      type: 'tag/fetchTags',
      //需要传递的参数,这里可以传递一些发送请求所需要的参数
      payload: null,
    });
  };
    //获取请求数据,这里需要在函数外面获取数据，否则第一次点击按钮是没有数据的
    console.log(props.tag);
  return (
    <div>
      <h1>我是tag列表</h1>
      <Button type="primary" onClick={getHttpHandle}>
        点击按钮，获取数据
      </Button>
    </div>
  );
};

2.2创建model

//在src根目录下新建models文件夹，这里是约定式
//src/models/tag.ts
 import { Effect,request,Reducer} from 'umi'
 interface IndexModelState {
    name: string;
  }
 interface IndexModelType {
    namespace :string,
    state:{
        tagList:any[]
    },
    effects: {
        fetchTags: Effect
    },
     reducers:{
        setTagsList: Reducer<IndexModelState>;
     }
  }
//获取数据
const getHttpTags=()=>{
    return request('/api/tags')
}
const tagModel:IndexModelType= {
    //命名空间，调用model的时候，不要和其他的model重名，是唯一的
    namespace :'tag',
    //状态，跟React中的state类似，和Redux中保存的state一样
    state:{
        tagList:[]
    },
    //调用服务端的接口
    effects:{
        //这里有两个参数
       //payload接受一些传递过来的参数，例如表单提交
       //callback可以进行额外操作
       //call访问外部的方法
       //put将数据传递给reducer
          *fetchTags({payload,callback},{ put, call}){
              //第一个参数是外部函数，第二个参数是需要传递进函数的参数
              const res=yield call(getHttpTags)
              //将数据传递给reducers,更新状态
              yield put({
                  //类似于redux中的action，表式这个是用来干嘛的
                 type:'setTagsList',
                 //需要传递的数据
                 payload:res
              })
          }
    },
    //跟新state,是一个纯函数
   reducers:{
       //原来的状态
    setTagsList(state:any,action:any){
        //需要对状态进行改变
        return {...state, tagList:action.payload}
    }
   }
}
export default tagModel

2.3连接ui组件和model

export default connect(
  //第一个参数是一个回调函数
  ({ tag }: any) => ({ tag }),
)(Tag);