The DVA framework uniformly handles the loading status of all pages

This article mainly introduces the DVA framework to uniformly handle the loading status of all pages. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

dva has a management effects execution hook, and encapsulates the dva-loading plug-in based on this. This article will share with you how the DVA framework handles the loading status of all pages in a unified manner. Friends who are interested should take a look.

dva has a hook that manages the execution of effects, and encapsulates the dva-loading plug-in based on this. Through this plug-in, we don’t have to write showLoading and hideLoading over and over again. When a request is made, the plug-in will automatically set the loading status in the data to true or false. We then bind and render based on this data when rendering components.

The use of dva-loading is very simple. Add in index.js:

// 2. Plugins
app.use(createLoading());

Pass the loading status as an attribute in each page Insert the component and perform style processing, such as turning in circles or showing that it is loading, but the point is that our app has multiple pages, and doing this for each page is very cumbersome.

How to do status processing only once, and the loading status will be triggered during each request? It is actually very simple, because dva-loading provides a global attribute.

1. The loading object in state

The global attribute in the loading object represents the global loading state. In models, each The loading status of each model

So we indicate the global loading status according tostate.loading.global.

2. A parent component

We want to apply this loading state to all pages, then we can use a parent component in each page to handle this loading. Above code:

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

Description:

1, <ActivityIndicator /> is from ant-design mobile A loading indication component, the animation attribute indicates whether to display or not. We use the show and loading attributes to control whether to display or not.

2. Why do we need two parameters, show and loading? Isn’t it enough to just have loading? The existence of show is to realize a requirement: loading appears after the TIMER time when the request occurs. If the request is very fast and is less than the TIMER time, then loading will not be displayed. If there is no such requirement, only the render() method can be retained in this component.

3. && !state.loading.models.Verify What does this do? The purpose of this is to eliminate the impact of the Verify model on loading. For example, if I don’t want loading to appear on the page corresponding to this model, I can handle it here.

3. Use this parent component in router.js

With this parent component, you can implement loading by adding this parent component to each page. Of course, this It can be handled uniformly in router.js.

For example:

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

In this way, when entering every page under /admin, App will be loaded as the parent component.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Mini program realizes navigation of Jiugongge interface

Analysis of binding click events of WeChat mini program

About the implementation of pop-up boxes and modal boxes in WeChat mini programs

The above is the detailed content of The DVA framework uniformly handles the loading status of all pages. For more information, please follow other related articles on the PHP Chinese website!