我已经看过很多关于此的示例，但每个示例都包含有关持久值的详细信息，例如 todo 已“完成”。 我知道我们应该为每个 TODO 保留这个（“完成”）值，并且当使用 reducer 重新计算 store 时，组件会重新渲染。
我们在哪里保存每个待办事项的“isUpdating”等信息，当用户标记待办事项完成并且随后的 ajax 调用是涉及在数据库中将待办事项标记为完成。
我也明白，由于这些信息可能对其他组件没有用，我最好将其保留在演示组件“TODO”下。但是如果这些标志都保留在组件中，那么组件如何知道在 todo 上的更新是成功还是在 store 更新时失败？
【问题讨论】：
标签： reactjs react-redux redux-saga react-boilerplate
在 redux 中，我们有多个 reducer 来处理整个状态。在待办事项应用程序中，待办事项是状态的一部分，但它们并不总是整个状态。在您的情况下，您的应用程序状态由两个实体组成，todos 和加载状态。
考虑到上述情况，您可以拥有一个处理 todods 的减速器。它将负责加载所有项目、更新项目或删除项目。换句话说，这个 reducer 只关心 todos 的状态，而不关心你在 ajax 调用的装载过程中的位置。
对于加载过程，您可以创建另一个减速器。这个 reducer 对你的待办事项一无所知，它确实适用于你的应用程序管理的任何类型的数据。所有这个 reducer 担心的是我们当前是否处于异步 ajax 调用的中间。如果是这样，我们可以将isLoading之类的布尔值设置为true，当异步调用完成或出错时，我们只需将其设置为false。然后任何想要在加载时显示一些微调器的组件只需要订阅这个加载减速器的状态更改。
这是我在工作中的多个生产项目中实现此功能的方式。这绝不是唯一的方法，也不是最好的方法，它只是我知道的一种有效的方法。
编辑：以上内容适用于整个站点的更通用的加载器，但是 OP 想知道如何在发生一些仅涉及该项目的异步调用时使每个单独的项目显示一个加载器。
我将采取的方法如下。我们现在有 2 个状态数组，而不是只有一个状态数组来跟踪待办事项。一个数组跟踪数据，另一个数组跟踪与 UI 相关的数据。换句话说，跟踪数据的数组对isLoading 一无所知，因为这是一个与 UI 相关的道具，但另一个数组将跟踪与 UI 相关的所有待办事项。这样，在渲染 faze 期间循环遍历每个 todo 时，我们可以在状态中的 UI 相关数组中查看这个确切 todo 的 isLoading 状态是什么，如果isLoading 为真，那么我们会在这个特定的 todo 上显示一个微调器.
这很好地分离了关注点。跟踪数据的数组根本不需要担心 UI。但是我们仍然可以从列表中的项目中获得单独的微调器的好处。
【讨论】：
如果您想使用 redux 中间件来处理这些异步操作（例如您已标记问题的 redux-saga），那么将值与状态中的相关项一起存储要容易得多。
基本上，归结为：如果您已将动作从组件外部化，那么您应该将动作的结果状态外部化。
【讨论】：