React / Redux—假设我们有两个单独的待办事项列表，已完成的和未完成的

React / Redux - Let's say we have two separate lists of Todo Items, completed, and uncompleted

本文关键字：列表 未完成 已完成 单独 两个 假设 Redux 我们有 React      更新时间：2023-09-26

我不久前刚刚学习了React/Redux，我正在考虑一个可能不太常见的场景。

假设我们有一个简单的对象数组，这些对象都是Todo项目，并且我们在屏幕上只有两个框:Completed和Uncompleted。当我们从"未完成"框中单击一个项目时，它应该立即被移动并呈现在"完成"框中。

在REDUX中，过滤这些数组项的更好方法是什么?还是在REACT ?对于这个特定的示例，下面两个示例中哪一个是更好的实践?谢谢。

A)用户单击未完成待办事项列表中的一个项目，这将设置一个操作创建器，以调度一个类型为ITEM_COMPLETED的操作。这个动作在未完成的项目和已完成的项目缩减器中被监听。在Uncompleted items reducer中，当这个动作被"听到"时，就会在当前数组中调用一个过滤器方法来删除经过的项目，在Completed items列表中，该项目被简单地添加到数组扩展中。通过这种方式，项目将从Uncompleteddiv中移除，并看起来已经移动到Completeddiv中。

还是……

B)只有一个动作，而且是ACTION_TOGGLE类型。例如，当一个对象从未完成列表中被点击时，它会经过一个动作创建器，创建一个全新的对象，其完成值被设置为TRUE，从数组中删除旧的Todo对象，然后为全新的状态创建一个新的数组副本，并插入新调整的对象。现在，在反应中分离VIEW层上的项目的逻辑将在反应容器中代替。也就是说，渲染方法将取所有项，如果它们被过滤为未完成值，则将它们放在DIV A中，如果它们被过滤为已完成值，则将它们放在DIV B中，因此给用户一种感知，即有些项位于未完成框中，而有些项位于已完成框中。

谢谢!

TL;DR:选项B，因为更好地分离关注(这对你的应用的未来很重要，而不是现在)

您有一个状态正在变化的待办事项列表。有两种方法来查看:

类型1:基本上，我有两种类型的待办事项。

已完成的待办事项&未完成的行动计划。在本例中，您的状态包含2个对象，以此类推。在这种情况下，选项A似乎是更正确的方法

const completedTodos = [{}, {}];
const uncompletedTodos = [{}, {}];
类型2:我有一个待办事项列表，每个待办事项都有不同的属性

每个待办事项都有一个已完成/未完成的状态。在这种情况下，选项B似乎是正确的

const todos = [{...completed: true}, {...completed: false}];

为什么这很重要?

因为这决定了您如何看待应用程序。在未来，你会在你的待办事项列表中添加更多的事情吗?在这种情况下，你会有多种类型的待办事项(A)还是有多个标签的待办事项(B)?

例如:假设您决定向您的待办事项添加标签。在这种情况下，使用一个reducer来处理动作{type: TOGGLE_TAG, data: {id: <todoid>, tag}}似乎是一种更好的方法，类似于选项B中用于管理完成状态的方法。

View(即react组件)关心的是如何显示这些数据。因此，如果你需要迭代列表过滤它们，以创建2个不同的列表等，这是视图的关注和逻辑应该在React render()方法。

我想说，在这个简单的例子中，方法B可能是最好的，也是最直接的。您可以仅存储Todo对象数组，并将完成值设置为true，然后将视图连接到存储，以决定在何处显示内容。

相关文章：