Как я могу использовать неизвестность с редуксом

Question

Я не нашел четкой информации об этом, поэтому решил спросить вас. У меня есть приложение на основе избыточной инфраструктуры. Есть ли способ использовать Suspense для того, чтобы ждать, пока данные не будут извлечены с помощью избыточности с аксиосами? Я помещаю свой призыв к действию в componentDidMount, тогда, конечно, он идет с потоком-избыточностью (с избыточным потоком и аксио), пока не доберется до магазина. Однако до этого я хотел бы использовать Suspense для отображения счетчика вместо пустых полей без извлеченных данных. Как я мог ждать с Supsense, пока данные наконец не попадут в хранилище?

Спасибо за любую информацию.

Answer 1

Согласно официальному документу React, Suspense используется для загрузки компонента, а не для извлечения данных:

Если модуль, содержащий OtherComponent, еще не загружен ко времени рендеринга MyComponent, мы должны показать некоторый запасной контент, пока мы ожидаем его загрузки - например, индикатор загрузки. Это делается с использованием компонента Suspense.

Если вы работаете с redux, я думаю, что вы просто сохраняете свое приложение простым, обрабатывая состояние loading с помощью Redux и показывая индикатор в методе render, например:

render(){
  const { isLoading, data } = this.props
  if(isLoading) {
    return <Your indicator component />
  }
  if(isEmpty(data)) {
    return <div>Your data is empty</div>
  }
  return this.renderList(data)
}

Answer 2

В реактивных документах есть явный пример ожидания - возможно, это поможет другим ответить на ваши вопросы:

Если модуль, содержащий OtherComponent, еще не загружен к моменту рендеринга MyComponent, мы должны показать некоторое отступление содержимого, пока мы ожидаем его загрузки - например, индикатор загрузки. Это делается с использованием компонента Suspense .

import OtherComponent from './OtherComponent';
import AnotherComponent from './AnotherComponent';

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

fallback prop принимает любые элементы React, которые вы хотите визуализировать, ожидая загрузки компонента.

Checkout React документы: https://reactjs.org/docs/code-splitting.html