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

Question

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

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

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

A) 用户点击未完成待办事项列表中的一项，这会设置 Action 创建者以分派(dispatch)类型为 ITEM_COMPLETED 的 Action 。此操作在BOTH 未完成项目和 已完成项目缩减器中被监听。在 Uncompleted items reducer 中，当“听到”此操作时，将简单地在当前数组上调用过滤器方法以删除通过的项目，并在 Completed 项目列表中，将项目简单地添加到数组 spread 中。这样，该项目将从 Uncompleted div 中删除，并且看起来已移动到 Completed div。

或者...

B) 只有一个 Action ，即 ACTION_TOGGLE 类型。例如，当一个对象从未完成列表中被点击时，它会通过一个 Action 创建器创建一个全新的对象，其 Completed 值被设置为 TRUE，从数组中删除旧的 Todo 对象，然后为全新状态创建数组的新副本，并将新调整的对象插入...现在，在 react 中分离 VIEW 层上的项目的逻辑将在 react 中容器代替。即，render 方法将获取 ALL 项，如果它们被过滤为未完成值，则将它们放入 DIV A，然后将它们放入 DIV B 如果它们被过滤为已完成的值，因此让用户感觉有些项目在未完成的框中，有些项目在已完成的框中。

谢谢!

Answer 1

TL;DR:选项 B，因为更好的关注点分离(这对您应用的 future 很重要，不一定是现在)。

您有一个状态不断变化的待办事项列表。有两种方法可以查看:

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

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

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

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

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

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

为什么这很重要？

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

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

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