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属性。

一、state中的loading对象

loading对象中的global属性表示的全局loading状态，models里是每一个model的loading状态

因此咱们根据state.loading.global指示全局loading状态。

二、一个父级组件

咱们要向全部页面应用这个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 (
            <div className={this.props.className}>
                { this.props.children }
                <div className={styles.loading}>
                    <ActivityIndicator toast text="正在加载" animating={show && loading} />
                </div>
            </div>
        );
    }
}

const mapStateToProps = (state, ownProps) => {
    return {
        loading: state.loading.global && !state.loading.models.Verify
    }
};

export default connect(mapStateToProps)(App);

说明：

一、<ActivityIndicator />是ant-design mobile的一个loading指示组件，animating属性指示显示与否，咱们使用show和loading两个属性来控制显示与否。

二、为何要show和loading两个参数，有个loading不就能够了吗？show的存在是为了实现一个需求：loading在请求发生的TIMER时间后出现，若是请求很快，小于TIMER时间，那么就不显示loading。若是没有这个需求，这个组件中能够只保留render()方法。

三、&& !state.loading.models.Verify这个是作什么的？这个的做用是排除Verify这个model对loading的影响，好比我不想在这个model对应的页面出现loading，能够在这里处理。

三、在router.js中使用这个父级组件

有了这个父级组件，那么在每一个页面中加入这个父级组件，就能够实现loading，固然这个是能够在router.js中统一处理一下的。

好比：

        <Router history={history}>
            <Route path="/admin" component={App}>
                <IndexRoute component={AdminIndex} />
                <Route path="movie_add" component={MovieAdd} />
                <Route path="movie_list" component={MovieList} />
                <Route path="category_add" component={CategoryAdd} />
                <Route path="category_list" component={CategoryList} />
                <Route path="user_add" component={UserAdd} />
                <Route path="user_list" component={UserList} />
            </Route>
        </Router>

这样，在进入/admin下的每一个页面，都会加载App做为父组件。

四、OVER