使用React-Redux我应该在哪里保持列表项特定状态,如isUpdating isUpdated isErrone

时间:2017-05-02 19:47:58

标签: reactjs react-redux redux-saga react-boilerplate

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

我们在哪里为每个待办事项保留“isUpdating”等信息,当用户标记待办事项并且随后的ajax呼叫时,我将用它来显示特定待办事项上的加载程序(不是待办事项列表)涉及将todo标记为在数据库中完整。

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

2 个答案:

答案 0 :(得分:1)

在redux中,我们有多个reduceper来处理整个状态。在todo app中,todos是状态的一部分,但它们并不总是整个状态。在您的情况下,您的应用程序的状态包含两个实体,todos和加载的状态。

考虑到上述情况,您可以使用一个处理todods的reducer。它将负责加载所有项目,或更新项目,或删除项目。换句话说,这个reducer只关注todos的状态,但它并不关心你在ajax调用的提货过程中的位置。

对于加载过程,您可以创建另一个reducer。这个reducer对你的待办事项一无所知,它可以真正适用于你的应用管理的任何类型的数据。如果我们目前处于异步ajax调用的中间,那么所有这些减速器都会担心。如果我们那么我们可以将isLoading之类的bool设置为true,当异步调用完成或出错时我们只需将其设置为false。然后,任何想要在加载时显示一些微调器的组件都需要订阅此加载减速器的状态更改。

这是我在工作中在多个生产项目中实现此功能的方式。这绝不是唯一的方式,也不是最好的方式,它只是我认识的一种方式。

编辑:以上内容适用于整个网站的更通用的加载程序,但OP想要知道如何在发生仅涉及该项目的异步调用时使每个单独的项目显示加载程序。

我将采取的方法如下。我们现在有两个处于状态的数组,而不是只有一个数组处于跟踪待办事项的状态。一个数组跟踪数据,另一个数据跟踪与UI相关的数据。换句话说,跟踪数据的数组对isLoading一无所知,因为这是与UI相关的道具,但是另一个数组将跟踪与UI相关的所有待办事项。这种方式在渲染模糊期间循环遍历每个待办事项时,我们可以查看状态中UI相关数组中此确切待办事项的isLoading状态是什么,如果isLoading为真则我们在此显示一个微调器具体的待办事项。

这给了一个很好的关注点。跟踪数据的数组根本不需要担心UI。但是我们仍然可以获得列表中项目的个体微调器的好处。

答案 1 :(得分:0)

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

基本上,它归结为:如果您已从组件中外部化了该操作,那么您应该将操作的结果状态外部化。