DVA 框架处理页面 loading 状态

// 2. Plugins

app.use(createLoading());

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);

<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>