Question

我正在渲染高阶组件，比如Application，我需要在渲染之前从服务器获取一些数据。我在Application的构造函数中执行loadApplicationState()操作，执行服务器调用并准备初始状态。

一些简化的代码，

class Application extends Component {
  constructor(props) {
    super(props);
    const { dispatch } = this.props;

    dispatch(loadApplicationState());
  }

  render() {
    const { stateLoaded } = this.props.state;

    render (
      <div>
        { stateLoaded ? renderApp() : renderProgress() }
      </div>
    )
  }
}

function loadApplicationState() {
  return (dispatch) => {
    // fetch data and once ready,
    applicationStateLoaded(data);
  }
}

我在练习上尝试过，它运行正常。但不确定这是一种正确的方法吗？特别是为此目的使用构造函数。

Answer 1

我们在componentDidMount中运行它，然后在Redux状态下测试$isLoading标志，呈现加载指示符或实际UI。像这样：

import React, { Component } from 'react';

const mapStateToProps = (state) => ({
  $isLoading: state.initialState.$isLoading
})
const mapDispatchToProps = (dispatch) => ({
  loadApplicationState(){ dispatch(loadApplicationState()); }
})

export class Application extends Component {
  componentDidMount(){
    this.props.loadApplicationState();
  }

  render(){
    const {
      $isLoading
    } = this.props;

    {$isLoading ? (<Loader />) : <ActualApplication />}
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Application)

React / Redux在组件构造函数中加载应用程序状态

1 个答案: