关于react中antd design pro下面src/models
1.src/models
在 Ant Design Pro 中,一个完整的前端 UI 交互到服务端处理流程是这样的:
1.UI 组件交互操作;
2.调用 model 的 effect;
3.调用统一管理的 service 请求函数;
4.使用封装的 request.ts 发送请求;
5.获取服务端返回;
6.然后调用 reducer 改变 state;
7.更新 model。
// model
{
namespace: String, // 命名空间
state: Object, // 状态
reducer: Object, // 同步更新 state
effects: Object, // 副作用:处理异步逻辑
subscriptions: Object // 订阅数据源
}
这些文件被引用在src/pages/.umi/dva中。
我们以 models/global
为例:
namespace: 'global'
说明以下此处的dva命名空间为 global
,即你调用的时候需要采用 global.XXX
的形式
其中的 state: {}
是存放状态的,也就是数据。
reducers
是用来更新 state
的,但是他只能是同步的。所以我们需要 effects
来进行异步更新。
即:
state: {
collapsed: false,
notices: [],
}, // 存放状态和数据
reducers: { // 用来同步设置state
changeLayoutCollapsed(
state = {
notices: [],
collapsed: true,
},
{ payload },
) {
return { ...state, collapsed: payload };
}, saveNotices(state, { payload }) {
return {
collapsed: false,
...state,
notices: payload,
};
},
// ...
}
effects: { // 异步更新state,通过调用同步的reducers实现
*fetchNotices(_, { call, put, select }) {
const data = yield call(queryNotices);
yield put({
type: 'saveNotices',
payload: data,
});
const unreadCount = yield select(
state => state.global.notices.filter(item => !item.read).length,
);
yield put({
type: 'user/changeNotifyCount',
payload: {
totalCount: data.length,
unreadCount,
},
});
},
// ...
}
关于react中antd design pro下面src/models的更多相关文章
- react中antd+css Module一起使用
antd 和 css modules 不能混用,针对antd的css 单独写一条loader的规则,不开启 css modules. 使用 exclude 和 include 配置参考(https:/ ...
- react使用ant design pro时的滑动图片组件
react的滑动图片验证,是基于https://segmentfault.com/a/1190000018309458?utm_source=tag-newest做的修改,改动的主要有以下几点: 1. ...
- 记录学习antd design pro dva的过程,主要记错, 多图预警,如有理解偏差,忘指出,多谢!
首要问题: 如何增加菜单项 答案: 在router.config中添加路由,在locales语言国际化增加选项 问题1: 答案1: 问题2: 这个要修改state,正确写法 存在的疑惑:为什么不能直接 ...
- react中antd的表格自定义展开
antd的表格官方案例中给出的都是固定的图表展开,在做需求的时候,需要使用点击最后一列,然后出现展开内容,实现效果图如下 在最开始设置一个全局变量 const keys = [];在设置列参数的函数中 ...
- Ant Design Pro (中后台系统)教程
一.概念:https://pro.ant.design/docs/getting-started-cn(官方网站) 1.Ant Design Pro 是什么: https://www.cnblogs ...
- Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器,桌面安装运行
ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验 最近需要讲AntD Pro项目(以 ...
- pro.antd.design
有关react的ui组建antd.design新推出的pro版本,最近用到了路由方面. common与routes; 首先需要在menu.js里面配置: { name: '精品', icon: 'da ...
- Ant Design Pro中Transfer穿梭框的实际用法(与后端交互)
Ant Design Pro中Transfer穿梭框的实际用法(与后端交互) 该控件的属性以及属性的作用在ADP的官方文档中都有介绍,但没有讲如何与后端交互,本文旨在讲解该控件与后端的交互. Ant ...
- (二)React Ant Design Pro + .Net5 WebApi:前端环境搭建
首先,你需要先装一个Nodejs,这是基础哦.如果没有这方面知识的小伙伴可以在园子里搜索cnpm yarn等关键字,内容繁多,此不赘述,参考链接 一. 简介 1. Ant Design Pro v5 ...
随机推荐
- js怎么删除数组元素,有哪些删除元素方法
JavaScript删除元素方法 1.根据索引删除数组元素 delete 数组[索引] *注意delete 后面是空格 var arr1=["aa","bb" ...
- 用js写出一个漂亮的单选框选中效果
一般的input框比较简单,我们可以用JavaScript配合css背景图片定位让我们模拟写出一个点击选中效果 首先需要有个图片素材,当页面加载的时候是背景图片定位到左图,当我们点击图片的时候,背景图 ...
- msf的rpc和json-rpc,我该选择哪个?
msf的rpc有两种调用方式,那么我们应该调用哪一个呢? 其中restful接口暂且不谈,这个rest api其实是简单对接了一下msf的后端数据库,这个自己也能读数据库来做,这个以后有时间再谈 首先 ...
- Centos7 使用 Ansible 批量安装中文字体
需求背景 Centos7 下 Java 生成图片水印时中文乱码,原因是没有安装中文字体. 安装中文字体 以下是基于 Centos7 手动安装中文字体的详细步骤.当测试或者生产环境服务器比较多的时候,建 ...
- [hdu5402 Travelling Salesman Problem]YY
题意:给一个n*m的矩形,每个格子有一个非负数,求一条从(1,1)到(n,m)的路径(不能经过重复的格子),使得经过的数的和最大,输出具体的方案 思路:对于row为奇数的情况,一行行扫下来即可全部走完 ...
- calc less 下不起作用
在 less中不能使用css3 calc属性不能 css3 新增长度计算属性 可以根据不同单位计算宽度 .test{ width: calc(100% - 150px); } 但是当我们在less中使 ...
- 使用IDEA远程向伪分布式搭建的Hadoop提交MapReduce作业
环境 VirtualBox 6.1 IntelliJ IDEA 2020.1.1 Ubuntu-18.04.4-live-server-amd64 jdk-8u251-linux-x64 hadoop ...
- 【蓝桥杯C组】备赛基础篇之高精度算法
一.高精度加法 思路: 运用vector数组(c选手可用len来记录数组长度,数组去保存数字)将存入字符串里面的数字符倒叙保存,按照小学的加法列式,相加保存进位即可.具体参考代码. 详细代码解析: # ...
- VMware Tanzu已融合云原生与K8s 市场前景尚不确定
Tanzu是什么? Tanzu 结合了Wavefront IT监控的项目和产品,VMware于2017年5月收购了该软件,并加入了Cloud Foundry PaaS实用工具.VMware在2019年 ...
- 使用GitHub的API实现文件上传--李渣渣(lizaza.cn)
最近搭建了一个自己的博客网站和一个在线图片格式转换工具,经常写博客的时候需要上传图片,在线转换工具也需要一定的空间来临时存放图片文件.服务器的存储空间又比较有限,于是就想着将图片存储的GitHub上, ...