我不久前才刚刚学过React / Redux,我在考虑一种可能不太常见的场景.

假设我们有一个简单的对象数组,它们是待办事项,并且屏幕上只有两个框：已完成和未完成.当我们从“未完成”框中单击一个项目时,应立即将其移动并在“已完成”框中进行渲染.

在REDUX中,过滤这些数组项的更好方法是什么？还是在REACT中？下面的两个示例中,哪个是该特定示例的最佳实践？谢谢.

A)用户单击“未完成的待办事项”列表中的项目,这会将操作创建者设置为关闭,以发送名为“ ITEM_COMPLETED”类型的操作.在“未完成的项目”和“已完成的项目”简化程序中都将监听此操作.在“未完成的项目”简化程序中,当此操作为“ heard”时,仅在当前数组上调用筛选方法以删除通过的项目,然后在“已完成的项目”列表上,将项目简单地添加到数组传播中.这样,该项目将从“未完成” div中删除,并且似乎已移至“完成” div.

要么…

B)只有一个动作,那就是ACTION_TOGGLE类型.例如,当对象从“未完成”列表中单击时,它会经过一个动作创建者,该创建者创建一个全新的对象,其“已完成”值设置为TRUE,从数组中删除旧的待办事项对象,然后创建一个新的副本.现在,用于在react中分离VIEW层上的项目的逻辑将改为在react容器中. IE,render方法将获取所有项目,如果将它们过滤为未完成的值,则将它们放入DIV A；如果将它们过滤为已完成的值,则将它们放入DIV B,因此使用户感觉有些项目是在“未完成”框中,某些项目在“已完成”框中.

谢谢！

解决方法:

TL; DR：选项B,因为更好的关注点分离(这对于应用程序的未来很重要,而不一定是当前的需求).

您有一个待更改状态的待办事项列表.有两种查看方法：

类型1：从根本上来说,我有2种待办事项.

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

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

类型2：我有一个待办事项清单,每个都有不同的属性

每个待办事项的状态为已完成/未完成.在这种情况下,选项B似乎是正确的

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

为什么这很重要？

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

例如：假设您决定将标签添加到待办事项中.在这种情况下,让减速器来处理操作{type：TOGGLE_TAG,数据：{id：< todoid>,tag}}似乎是更好的方法,类似于选项B中用于管理已完成文件的操作状态.

视图(即react组件)关心的是弄清楚如何显示此数据.因此,如果您需要遍历列表,则将它们过滤掉以创建2个不同的列表等.这是视图的关注点,对此的逻辑应该在React render()方法中.