Как я могу использовать suspense с redux

#reactjs #redux

#reactjs #переопределение

Вопрос:

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

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

Ответ №1:

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

Если модуль, содержащий другой компонент, еще не загружен ко времени рендеринга 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)
}