Как отрендерить компоненту react только после ajax запроса, который обновит store?

Question

[Vanya Huk]

Как отрендерить компоненту react только после ajax запроса, который обновит store?
т.е. есть компонента реакт, и в конструкторе делаеться ajax запрос, после которого нужно обновить redux и уже после чего отрисовать компоненту

Answer 1

[Антон Спирин]

render() {
  const { someStateKey } = this.props;  

  if (!someStateKey) return null;

  return (
    {/* component JSX code */}
  );
}

Comments

[Vanya Huk]

что-то не понял идею с someStateKey

[Антон Спирин]

Vanya Huk, ну что-то, что вы получили или ключ который вы переписали после получения данных:

render() {
  const { data } = this.props;

  if (!data.length) return null;

  return (
    {/* component JSX code */}
  );
}

или:

render() {
  const { isDataLoaded } = this.props;

  if (!isDataLoaded) return null;

  return (
    {/* component JSX code */}
  );
}

Можно пока загружаются данные вместо null показывать прелоадер;

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

  if (isLoading) return <Preloader />;
  
  if (!data) return <EmptyPlaceholder />;
  
  return (
    {/* component JSX code */}
  );
}

Тут многое зависит от специфики проекта.