仅在Home组件中的Redux State更新时显示子组件

Question

我有一个父组件和两个子组件。在父组件中，我在componentDidMount（）中使用Redux Actions基于数据库中的数据更新Redux状态。在子组件中，我使用Redux状态并显示一些内容。这里的“问题”是子组件在Redux状态被更新之前就已经被渲染，并且在很短的时间内它们显示了Redux的初始状态。我要实现的是仅在父组件的Redux操作完成并且设置了真实状态后才显示这些组件。我该如何实现？

这是父组件

class Home extends EnhancedComponent {

  componentDidMount() {
    const rankingActions = new RankingActions();
    Promise.resolve()
      .then(() => this.showLoader())
      .then(() => rankingActions.getRanking())
      .then(() => this.closeLoader())
      .catch(error => this.onFaultGetData(error));
  }

  render() {
    return (
      <div>
        <HomeSummary />
        <HomeRanking />
      </div>
    );
  }
}

这些是子组件之一（另一个非常相似）

class HomeSummary extends Component {

  render() {
    return (
      <div className={css.wrapper}>
        <HomeSummaryItem
          color="orange"
          title="Wydaliśmy"
          amount={ `${this.props.ranking.moneySpent} zł`}
          icon="fa fa-money"
        />
        <HomeSummaryItem
          color="blue"
          title="Zamówiliśmy"
          amount={ `${this.props.ranking.ordersAmount} dania`}
          icon="fa fa-file-text"
        />
      </div>
    );
  }
}

const mapStateToProps = ({ ranking }) => {
  return {
    ranking
  };
};

export default connect(mapStateToProps)(HomeSummary);