React / Redux在組件構造函數中加載應用程序狀態

Question

我正在渲染高階組件，比如Application ，我需要在渲染之前從服務器獲取一些數據。 我所做的，在Application I的構造函數中發出執行服務器調用並准備初始狀態的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)