在 redux 中,我们有多个 reducer 来处理整个状态。在待办事项应用程序中,待办事项是状态的一部分,但它们并不总是整个状态。在您的情况下,您的应用程序状态由两个实体组成,todos 和加载状态。
考虑到上述情况,您可以拥有一个处理 todods 的减速器。它将负责加载所有项目、更新项目或删除项目。换句话说,这个 reducer 只关心 todos 的状态,而不关心你在 ajax 调用的装载过程中所处的位置。
对于加载过程,您可以创建另一个减速器。这个 reducer 对你的待办事项一无所知,它确实适用于你的应用程序管理的任何类型的数据。所有这个 reducer 担心的是我们当前是否处于异步 ajax 调用的中间。如果是这样,我们可以将一些 bool like 设置isLoading
为 true,并且当异步调用完成或出错时,我们只需将其设置为 false。然后任何想要在加载时显示一些微调器的组件只需要订阅这个加载减速器的状态更改。
这就是我在工作中的多个生产项目中实现此功能的方式。这绝不是唯一的方法,也不是最好的方法,它只是我知道的一种方法。
编辑:以上内容适用于整个站点的更通用的加载器,但是 OP 想知道如何在发生一些仅涉及该项目的异步调用时使每个单独的项目显示一个加载器。
我将采取的方法如下。我们现在有 2 个状态数组,而不是只有一个状态数组来跟踪待办事项。一个数组跟踪数据,另一个数组跟踪与 UI 相关的数据。换句话说,跟踪数据的数组将一无所知,isLoading
因为这是一个与 UI 相关的道具,但另一个数组将跟踪与 UI 相关的所有待办事项。这样,当在渲染 faze 期间循环遍历每个 todo 时,我们可以在状态中的 UI 相关数组中查看这个确切的 todo 的 isLoading 状态是什么,如果isLoading
是真的,那么我们会在这个特定的 todo 上显示一个微调器。
这很好地分离了关注点。跟踪数据的数组根本不需要担心 UI。但是我们仍然可以从列表中的项目中获得单独的微调器的好处。