2

我已经看到了很多关于这个的例子,但是每个例子都包含了关于持久值的细节,比如 todo 是“完成的”。我知道我们应该为每个 TODO 保留这个(“已完成”)值,并且当使用 reducer 重新计算 store 时,组件会重新渲染。

我们在哪里保存每个待办事项的“isUpdating”等信息,当用户标记待办事项完成并且涉及后续的ajax调用以标记时,我将使用这些信息来显示特定待办事项项上的加载程序(而不是待办事项列表)待办事项在数据库中完成。

我也明白,由于这些信息可能对其他组件没有用,我最好将其保留在演示组件“TODO”下。但是如果这些标志保留在组件中,组件如何知道 todo 上的更新是成功的还是 store 更新失败的?

4

2 回答 2

1

在 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。但是我们仍然可以从列表中的项目中获得单独的微调器的好处。

于 2017-05-02T20:13:39.790 回答
0

如果您想使用 redux 中间件来处理这些异步操作(例如您已标记问题的 redux-saga),那么将值与状态中的相关项一起存储要容易得多。

基本上,它可以归结为: 如果你已经从组件外部化了动作,那么你应该外部化动作的结果状态。

于 2017-05-02T20:03:11.487 回答