Question

我想在成功的异步调用之后才想要渲染组件。在此之前，我想展示一个Loading组件来改善用户体验。

在一个组件中，我知道如何处理它，参考Reactjs async rendering of components。但在我的项目中，有许多页面（组件）显示具有异步调用的信息。

那么有没有办法在某个地方设置全局加载组件而不是在每个组件中写入内部状态？

Answer 1

在每个API开始之前开启

DISPATCH针对API_START的操作。

dispatch(apiStart());

const apiStart = ()=>{
    type : "API_START"
}

完成API调用后，调度API_FINSIH的操作。

dispatch(apiFinish());

const apiFinish = ()=>{
    type : "API_FINSIH"
}

减速器：

const uiReducer = (state, action) => {

    switch (action.type) {
        case "API_START":
        return Object.assign({}, state, {
            requestsCOunt: state.requestsCOunt + 1
            });

    case "API_FINSIH":
        return Object.assign({}, state, {
            requestsCOunt: state.requestsCOunt - 1
        });
    }
}

在组件中检查状态属性state.requestsCOunt，

如果是state.requestsCOunt <=0，请隐藏微调器

Answer 2

也许看看反应中的HOC模式：

你可以这样做：

componentDidMount() {
  const YourAsyncPage = withAsynchronous(
    YourPage,
    '/your/page/url'
  );
}

render() {
  return (<YourAsyncPage />);
}

然后渲染它：

print(df)

name      points    attempts
'Alex'      2          4
'Brian'     1          2
'Cathy'     3          5
'Daniel'    5          7

Answer 3

您需要一种方法将状态的正确部分委托给组件，因此如果您的应用程序具有登录组件，则登录组件中的处理程序应该传递它负责的状态部分。

如果组件的加载看起来与组件状态中的loading成员不同，并使用全局实用程序模块中的函数将其设置为true或false，或者从应用程序中注入它。

应用程序的处理程序（操作类型是数组）：

let utils = {
  toggleLoading:(sate)=>
    Object.assign(
      {}
      ,state
      ,{loading:!state.loading}
    )
}
switch(action.type.slice[0,1]) {
  case "login":
      return Object.assign(
        {}
        ,applicationState
        ,{
          login:
            loginHandler(
              applicationState.login
              ,Object.assign(
                {}
                ,action
                ,{type:action.type.slice(1)}
              )
              ,utils
            )
          }
      )
    }

登录处理程序

switch(action.type.slice[0,1]) {
  case "toggleLoading":
    return utils.toggleLoading(state)
}

由于组件不知道它是如何嵌套的，因此必须将操作类型数组从应用程序传递到组件，从组件传递到子组件（操作类型可以添加到状态）。

如果您想使用一个组件来显示和隐藏加载，那么代码是类似的，除了您的登录组件将toggleLoading操作委托给加载组件，就像应用程序委托它登录一样。

在这种情况下不需要传递实用程序对象，因为只有一个加载组件，因此您不会重复实现加载的设置。

Answer 4

带有加载组件的组件的异步呈现的基本示例如下：

import React                from 'react';
import ReactDOM             from 'react-dom';        
import PropTypes            from 'prop-types';
import YourLoadingComponent from './YourLoadingComponent.react.js';

export default class YourComponent extends React.PureComponent {
    constructor(props){
        super(props);
        this.state = {
            data: null
        }       
    }

    componentDidMount(){
        const data = {
                optPost: 'userToStat01',
                message: 'We make a research of fetch'
            };
        const endpoint = 'http://example.com/api/phpGetPost.php';       
        const setState = this.setState.bind(this);
        fetch(endpoint, {
            method: 'POST',
            body: JSON.stringify(data)
        })
        .then((resp) => resp.json())
        .then(function(response) {
            setState({data: response.message});
        });
    }

    render(){
        return (<div>
            {this.state.data === null ? 
                <YourLoadingComponent />
            :
                <div>{this.state.data}</div>
            }
        </div>);
    }
}

反应组件的异步呈现，如何设置全局加载组件？

4 个答案: