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