React和Redux：在Redux中存储加载状态的正确方法

Question

每当我的应用程序组件从后端获取数据时，我会调用一个文件加载UI来显示加载状态...问题在于当一个组件正在获取数据时，我会触发loadingData()，这导致其他组件也显示加载状态。我知道这是因为我只有一个加载操作被触发。我的问题是，我应该为每个组件都单独创建加载操作吗？如果不需要，我该如何解决这个问题？谢谢。

//Loading action

export const LOADING_DATA      = '[ui] LOADING DATA';
export const LOADING_DATA_COMPLETE    = '[ui] LOADING DATA COMPLETE';

export const loadingData = () => ({
  type: LOADING_DATA
});

- night_programmer

Answer 1

答案是，您不应该先创建一个 loadingData() Redux 动作。加载或者未加载状态和您所说的一样，是每个组件 "局部" 状态，因此您应该适当地将其存储在每个组件的 "常规" 状态中。

Redux 存储器设计用于存储对多个组件互通的数据。是否某个组件已准备就绪肯定不属于该范畴。

- k-wasilewski

---

谢谢。有道理。 - undefined

Answer 2

处理加载状态可以在本地组件状态、最终存储数据的 Redux 状态中，或者完全不同的部分进行。没有“一刀切”的解决方案，不同的应用程序处理方式也不同。

如果您想全局跟踪该状态，则通常的模式是使用 yourApi/pending 操作，然后是 yourApi/fulfilled 或 yourApi/rejected 操作，这是官方 Redux 工具包的 createAsyncThunk 如何处理的。

但是，如果有两个共享相同数据的组件，则它们也共享相同的加载状态。也许您应该检查数据是否已经存在，并仅在数据不存在时获取它，因为首先为什么要获取两次呢？或者，如果加载状态真的描述了不同的端点，请将其拆分为多个加载状态。

- phry

Answer 3

有一个很好的实践是，对于每个调用后端API的subject，你都要有一个loading。例如，对于调用books API，你需要一个loading；对于调用movies API，你也需要一个loading，依此类推。

我建议你在状态中创建一个loadings对象，并填充它所需的不同loading，像这样：

loadings: {
  books_loading,
  movie_loading
}

在你的组件中，你不会调用一个影响很多组件的通用“加载状态”，只有那些需要特定“加载”功能的组件才会使用它，这样你就能解决你所遇到的问题。

- Taghi Khavari