如何使React组件等待Redux存储变量被设置？

Question

I'm working on a react app and using redux to manage the store variables. The store variables get updated on an API call on the homepage, and are used in api calls in other components as query parameters.

I set the store variables in the homepage component like so:

API.get("EmployerApiGw", "/employer/" + this.state.shadowAccountId).then(resp => {
      if (resp.items.length > 0) {
        this.setState({
          isValid: true,
          openDialog: false
        });
        this.props.updateAccountid(this.state.shadowAccountId);
        this.props.updateCompanyId(resp.items[0].companyid);
      } else {
        this.setState({
          isValid: false
        });
      }
    });

I'm having an issue where the components get mounted before the store variables are updated in the api call. This causes the other api calls to fail because the store variables are null at that point.

API.get("EmployerApiGw", "/employer/" + this.props.accountid + "/billingstatements", {
      queryStringParameters: { companyid: this.props.companyinfo.companyid }
    })

My temporary fix has been to use componentDidUpdate() to call componentDidMount() if the props have changed (I'm passing the store variables as props to the components). This still causes the invalid api calls to run, but re-renders the components once the store variables have updated.

componentDidUpdate(prevProps) {
    if (JSON.stringify(prevProps) !== JSON.stringify(this.props)) {
      this.componentDidMount();
    }
  }

This still causes unnecessary api calls to be made, and clutters up the console.

I was wondering if there is a way to make components wait until the store variables have finished updating.

Thank you.

Answer 1

I would put a loading spinner in the child component and have that show by default. Then I would put an if statement around your second API call so it only gets called if the arguments you need have already been initilised. Something like this:

if (this.props.accountid && this.props.companyinfo && this.props.companyinfo.companyid) {
  //do api call
}

Then use componentDidUpdate to watch for when the props change. When they are no longer null you can call your API and replace the loading spinner with the rest of the child component you were waiting for API data to render.