Question

我没有找到任何明确的信息，所以我决定问你。我有基于redux基础设施的应用程序。有没有一种方法可以使用Suspense来等待数据被axios的redux提取？我将动作调用放入componentDidMount内，然后它当然会带有redux流（带有redux thunk和axios），直到它到达商店。但是，在此之前，我想使用Suspense来显示微调框，而不是未获取数据的空白字段。我该如何与Supsense等到数据最终到达商店？

感谢您提供任何信息。

Answer 1

根据React官方文档，Suspense用于加载组件而不是获取数据：

如果MyComponent渲染时尚未加载包含OtherComponent的模块，则在等待其加载时，我们必须显示一些后备内容，例如加载指示器。这是使用Suspense组件完成的。

如果您正在使用redux，我认为您只需通过Redux处理loading状态并在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

在反应文档中有一个明显的悬念示例-也许这将有助于其他人回答您的问题：

如果MyComponent渲染时尚未加载包含OtherComponent的模块，则在等待其加载时，我们必须显示一些 fallback 内容，例如加载指示器。这是通过悬浮组件完成的。

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

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

后备道具在等待组件加载时接受要渲染的任何React元素。

检出React文档：https://reactjs.org/docs/code-splitting.html

我如何在Redux中使用悬念

2 个答案: