React / Redux - 假设我们有两个单独的Todo项目列表，已完成和未完成

Question

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

假设我们有一个简单的对象数组，这些对象是todo项目，我们在屏幕上只有两个框：Completed和Uncompleted。当我们从未完成框中单击某个项目时，它应立即移动并在“已完成”框中呈现。

在REDUX中过滤这些数组项的更好方法是什么？还是在REACT？下面这两个例子中的哪一个是这个特定例子的更好的做法？感谢。

A）用户点击未完成待办事项列表中的项目，该列表设置了一个动作创建者，以便发送一个名为“ITEM_COMPLETED”类型的动作。在未完成的itmes和已完成的项目减少器中同时监听此操作。在Uncompleted items reducer中，当“听到”此操作时，只会在当前数组上调用filter方法以删除传递的项，并且在Completed items列表中，该项只是添加到数组传播中。这样，该项目将从Uncompleted div中删除，并且似乎已移至Completed div。

...或

B）只有一个动作，那就是ACTION_TOGGLE类型。例如，当从未完成列表中单击某个对象时，它会通过一个动作创建者创建一个全新对象，其中Completed值设置为TRUE，从数组中删除旧的todo对象，然后创建一个新的副本用于插入新调整对象的全新状态的数组...现在，用于在反应中分离VIEW图层上的项目的逻辑将在反应容器中。 IE，渲染方法将获取所有项目，如果它们被过滤为未完成的值，则将它们放入DIV A中，如果它们被过滤为完成值，则将它们放入DIV B中，从而向用户表明某些项目是在未完成的框中，有些项目位于已完成框中。

谢谢！

Answer 1

TL; DR：选项B，因为更好地分离关注点（这对于应用的未来非常重要，不一定是现在的。）

您有一个状态正在发生变化的待办事项列表。有两种方法可以看：

类型1：从根本上说，我有2种类型的待办事项。

已完成的待办事项＆amp;未完成的待办事项。在这种情况下，您的状态包含2个对象，依此类推。在这种情况下，选项A似乎是更正确的方法

const completedTodos = [{}, {}];
const uncompletedTodos = [{}, {}];

类型2：我有一个todos列表，每个todos都有不同的属性

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

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

为什么这甚至重要？

因为这决定了您查看应用程序的方式。将来，您是否会在待办事项列表中添加更多内容？在这种情况下，你会有多种类型的待办事项（A）或有多个标签的待办事项（B）吗？

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

View的关注点，即反应组件，要弄清楚如何显示这些数据。因此，如果您需要遍历列表，请过滤它们以创建2个不同的列表等，这是视图的关注点，其逻辑应该在React render()方法中。

Answer 2

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