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

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)