DVA框架统一处理所有页面的loading状态
微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的小程序开发环境和开发者生态。
这篇文章主要介绍了关于DVA框架统一处理所有页面的loading状态，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下dva 有一个管理 effects 执行的 hook，并基于此封装了 dva-loading 插件。下面通过本文给大家分享DVA框架统一处理所有页面的loading状态，感兴趣的朋友一起看看吧
dva 有一个管理 effects 执行的 hook，并基于此封装了 dva-loading 插件。通过这个插件，我们可以不必一遍遍地写 showLoading 和 hideLoading，当发起请求时，插件会自动设置数据里的 loading 状态为 true 或 false 。然后我们在渲染 components 时绑定并根据这个数据进行渲染。
dva-loading的使用非常简单，在index.js中加入：
// 2. Plugins app.use(createLoading());
每个页面中将loading状态作为属性传入组件，在进行样式处理，比如转圈圈或者显示正在加载什么的，但是重点是，我们的app有多个页面，每个页面都这么做，很繁琐。
如何只做一次状态处理，每次请求期间都会触发loading状态呢，其实也很简单啦，因为dva-loading提供了一个global属性。
1、state中的loading对象
loading对象中的global属性表示的全局loading状态，models里是每个model的loading状态
所以我们根据state.loading.global指示全局loading状态。
2、一个父级组件
我们要向所有页面应用这个loading状态，那么我们可以在每个页面中使用一个父级组件来处理这个loading。上代码：
import React from 'react';
import styles from './app.css';
import { connect } from 'dva';
import { ActivityIndicator } from 'antd-mobile';
const TIMER = 800;
let timeoutId = null;
class App extends React.Component {
state = {
show: false
}
componentWillMount() {
const { loading } = this.props;
if (loading) {
timeoutId = setTimeout(() => {
this.setState({
show: true
});
}, TIMER);
}
}
componentWillReceiveProps(nextProps) {
const { loading } = nextProps;
const { show } = this.state;
this.setState({
show: false
});
if (loading) {
timeoutId = setTimeout(() => {
this.setState({
show: true
});
}, TIMER);
}
}
componentWillUnmount() {
if (timeoutId) {
clearTimeout(timeoutId);
}
}
render() {
const { loading } = this.props;
const { show } = this.state;
return (
<p className={this.props.className}>
{ this.props.children }
<p className={styles.loading}>
<ActivityIndicator toast text="正在加载" animating={show && loading} />
</p>
</p>
);
}
}
const mapStateToProps = (state, ownProps) => {
return {
loading: state.loading.global && !state.loading.models.Verify
}
};
export default connect(mapStateToProps)(App);