Ant Design Pro的dva-loading
loading为dva的插件,全局可用,它里面维护了一些布尔值,用于控制loading动画效果的显示与隐藏,通过@connect()来注入使用
官网介绍如下:
https://dvajs.com/

在AntD Pro里,官方示例了一些用法:
@connect(({ list, loading }) => ({
list,
loading: loading.models.list,
}))
class CardList extends PureComponent {
...
}
@connect(({ login, loading }) => ({
login,
submitting: loading.effects['login/login'],
}))
class LoginPage extends Component {
...
}
这里,展示了两种用法,在介绍之前,先打印整个loading出来看一看结构

这里解释一下用法:
当我们执行了dispatch({ type: 'query', payload })后,这个叫做query的effects,以及包含这个effects的model,会被分别添加到loading的effects和models中,并受到监控,某effects获得结果,该effects的布尔值为false,只有该model所有的effects获得结果后,该model的布尔值为false,全局需要执行的effects均完毕,global才为false。(true:loading,false:loaded)
我连续执行两个dispatch,结果如下,请注意template的变化:

知道这些后,我们还要知道,Ant Design为我们提供了loading控制参数,例如Table的

有了这两件法宝,就可以放手loading,轻松做出一个体验不错的应用了,步骤一二三
@connect(({ template, loading }) => ({
template,
loading: loading,
}))
class Index extends Component {
const tTableProps = {
dataSource: list,
loading: loading.effects['template/query'],
}
......
return (
<Table
{...tableProps}
columns={columns}
simple
rowKey={record => record.id}
components={{
body: { wrapper: CommonBody },
}}
/>
)
}
完。
Ant Design Pro的dva-loading的更多相关文章
- Ant Design Pro 学习笔记:数据流向
在讲这个问题之前,有一个问题应当讲一下: Ant Design Pro / umi / dva 是什么关系? 首先是 umi / dva 的关系. umi 是一个基于路由的 react 开发框架. d ...
- 【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记(三)
前言:前一篇记录了[后台管理系统]目前进展开发中遇到的一些应用点,这一篇会梳理一些自己学习Ant Design Pro源码的功能点.附:Ant Design Pro 在线预览地址. Dashboard ...
- 初探ant design pro
1.增加路由子页面&配置菜单 因为ant design pro采取的是umi路由配置,所以只要在对应的文件夹下新建相关的文件夹以及文件,它会自动解析.按照如下的步骤做即可 PS.如果想要给菜单 ...
- ant design pro超详细入门教程
1.Ant Design Pro 初了解 说到ant design pro,得先了解一下ant design是个什么东西?ant design蚂蚁金服基于react打造的一个服务于企业级产品的UI框架 ...
- 阿里开源项目之Ant Design Pro
本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...
- ant design pro (十三)advanced 错误处理
一.概述 原文地址:https://pro.ant.design/docs/error-cn 二.详细 2.1.页面级报错 2.1.1.应用场景 路由直接引导到报错页面,比如你输入的网址没有匹配到任何 ...
- ant design pro (十二)advanced UI 测试
一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可 ...
- ant design pro (八)构建和发布
一.概述 原文地址:https://pro.ant.design/docs/deploy-cn 二.详细 2.1.构建 当项目开发完毕,只需要运行一行命令就可以打包你的应用: npm run buil ...
- ant design pro (七)和服务端进行交互
一.概述 原文地址:https://pro.ant.design/docs/server-cn Ant Design Pro 是一套基于 React 技术栈的单页面应用,我们提供的是前端代码和本地模拟 ...
- ant design pro(一)安装、目录结构、项目加载启动【原始、以及idea开发】
一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等, ...
随机推荐
- lambda List实现某列去重的解决方案采用扩展方法
public class CommonEqualityComparer<T, V> : IEqualityComparer<T> { private Func<T, V& ...
- mysql表名作为参数传入存储过程
有以下存储过程: CREATE DEFINER=`root`@`localhost` PROCEDURE `P_HoverTreePages`( ), ) , ), ), ), IN `SortTyp ...
- 关于Maven项目build时出现No compiler is provided in this environment的处理
版权声明:本文为博主原创文章,未经博主允许不得转载. http://blog.csdn.net/lslk9898/article/details/73836745 近日有同事遇到在编译Maven项目时 ...
- git 上传本地项目
一.下载和安装git 官网下载,默认一直点下一步安装. https://git-scm.com/ 二.在www.gitee.com 注册一个账号 1.点击加号“+”在gitee中新建一个项目 2.下面 ...
- 慢查询日志工具mysqlsla的使用
安装mysqlsla源码路径:https://github.com/daniel-nichter/hackmysql.com源码存放路径:/usr/local/src1.获取源码如果没有git命令,请 ...
- python中的tcp
目录 TCP简介 TCP介绍 TCP特点 TCP与UDP的不同点 udp通信模型 TCP通信模型 tcp客户端 tcp服务器 tcp注意点 TCP简介 TCP介绍 TCP协议,传输控制协议(英语:Tr ...
- angular $index获取ng-repeat的上一条数据
<div ng-repeat="item in dataList" ng-click="func($index,$index-1)"></di ...
- html之多行文本textarea 及下拉框select(12)
1.多行文本 多行文本使用textarea标签,默认值需要写在中间,和input标签不同,name属性用于后台获取数据(request.POST.get(meno)) <body> < ...
- iOS ----------怎么修改xcode默认打开方式
很简单就能解决:选中文件,右键,显示简介,打开方式,选择8.2.然后打钩.
- java垃圾回收机制GC
记得第一次总结java 的GC的时候,是刚开始在课堂上学习GC的时候,那时候许老师第一节java课 课后老师说同学们可以去深入理解一下java的GC机制: 但是是花费了三四个小时,翻看了<Thi ...