reactjs - 我如何将 Suspense 与 redux 结合使用

Question

我没有找到任何明确的信息，所以我决定向你询问。我有基于 redux 基础设施的应用程序。有没有办法使用 Suspense 来等待 axios 的 redux 获取数据？我将我的操作调用放在 componentDidMount 中，然后当然它会使用 redux 流程(使用 redux thunk 和 axios)，直到它到达商店。但在此之前，我想使用 Suspense 来显示旋转器，而不是没有获取数据的空字段。我如何才能使用 Supsense 等待数据最终到达存储？

感谢您提供任何信息。

Answer 1

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

If the module containing the OtherComponent is not yet loaded by the time MyComponent renders, we must show some fallback content while we’re waiting for it to load - such as a loading indicator. This is done using the Suspense component.

如果您正在使用 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)
}