反应：异步更改全局状态属性

Question

以下情况的最佳方法是什么？

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

a）上面的情况不是很好-true / false标志在第一个请求完成后变为false

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

Answer 1

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

因此，在redux的initialState中，您可以：

{
  ...
  usersLoading: false,
  productsLoading: false,
  companiesLoading: false,
}

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

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

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

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

{loading && <Loader />}