react+antd+dva+umi入门

首先创建一个项目,官网地址 https://ant.design/docs/react/practical-projects-cn
安装yarn,在命令行中输入 'yarn create umi',生成文件中的.umirc即为配置文件,但我们会把这个文件删了,然后新增一个config文件夹里面的config的文件作为配置文件,在src中新建models和service两个文件夹,公共的组件可以放在components文件夹里面,如下图:

image

service#层:发送请求,获取数据

import request from '@/utils/request';

export async function ×××××(param) {
return request(${url}sys/dic?${stringify(param,{arrayFormat: 'repeat'})}, {
method: 'GET',
});
}

models#层:

引入对应的service文件夹中的文件
import { ×××,×××,××× } from '@/service/×××';

image

定义的namespace是唯一,不可重复,effects:定义的方法是通过调用service里面的方法请求后台接口
reducers:里面定义的方法是对models层中的state里面的数据进行的操作。

page#页面

image

在每个子页面中,通过connect连接models层的方法,子页面发送请求时
this.props.dispatch({
type:"namespace名称/models定义的方法名称",
payload:{}//带的参数
})

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容