React：全局状态属性的异步更改

Posted 2023-02-22

【中文标题】React：全局状态属性的异步更改

【英文标题】：React: async change of global state property

【发布时间】：2020-06-02 19:42:45

【问题描述】：

以下场景的最佳方法是什么？

App.js 中有一个 Loader 组件，当属性处于全局状态 (redux) 属性时显示，例如loaderOn，设置为 true 有几个异步 api 调用（在整个应用程序的不同组件中），每个调用都调度一个动作，显示一个加载器 (loaderOn: true) 问题：LAST请求完成后如何隐藏Loader？

a) 上面的场景不太好——第一次请求完成后真/假标志变为假

b) 我尝试使用计数器标志 - 每个请求启动 +1，然后每个请求完成 -1 - Loader 隐藏在 0。但是请求是异步的（从不同位置设置状态也是如此？），所以它也不起作用（设置计数器标志取决于上一个状态，因此并行状态更改会给出错误的最终值）

【问题讨论】：

你可能只需要让每个加载请求在 redux 中设置一个不同的变量，然后只在 var1 && var2 && var3 时显示加载器。或者，您可以尝试在 redux 之上添加另一个库，请参阅此博客文章，它可能会有所帮助：toptal.com/react-native/react-redux-rxjs-tutorial

@BillMetcalf，正如我回答 technophyle - 每个装载机的单独减速器的解决方案并不是我想要的 - 特别是当有这么多装载机时。但我会深入研究 RxJS——尽管乍一看它似乎相当复杂。谢谢！

【参考方案1】：

解决问题的最简单方法是为不同的异步操作定义单独的加载标志。

所以，在 redux 的 initialState 中，你可以拥有：

  ...
  usersLoading: false,
  productsLoading: false,
  companiesLoading: false,

然后，根据每个数据的加载状态，将其设置为true/false。

最后，您可以使用一个选择器来评估所有加载标志的逻辑OR，如下所示：

state.usersLoading || state.productsLoading || state.companiesLoading

在您的App 组件中，将该选择器的值连接到您的道具，例如loading，并基于此渲染Loader 组件：

loading && <Loader />

【讨论】：

想了一下，但我一直在寻找不需要为每个请求单独的 reducer 的东西 - 特别是，使用 loader 的地方比 3 多得多，更像是 30 ;)。我在想的另一种方式是创建一个 div 并为每个加载器添加元素（例如 - 仅显示 css 中的第一个）。这样做可以，但似乎不是一个很好的解决方案。

使用加载器的地方的数量不会让事情变得更复杂。您定义一次选择器，然后在所有这些地方使用它，如果您使用重新选择，它将记住该值，因此在我看来这将是最简单的解决方案。