时间戳

首页 > 解决方案 > 如何为维护选择状态的列表设计 Redux Store

reactjs - 如何为维护选择状态的列表设计 Redux Store

问题描述

我的组件

'List'
'ListItem' (shows item selected or not)

考虑具有以下存储结构

store : {
 entities : {
   orders : []
 },
 selectedOrders : [ orderId1, orderId2 ]
}

所以每次调度动作时ListItem组件必须检查它的 ID 是否存在于selectedOrders中，然后显示适当的选择状态，这对每次selectedOrders迭代的性能不是很糟糕吗？

标签： reactjsreduxreact-redux

解决方案

我认为遍历数组没有错。特别是如果它不是特别大。我认为优化可读性比首先优化性能更好。

也就是说，您可以使用更高效的数据结构。像物体。使用 id 作为键，值无关紧要，只要它们是真实的。例如：

selectedOrders : { orderId1: true, orderId2: true }

并且检查很快：

selectedOrders['orderId1']

添加和删​​除键有点棘手：添加：

selectedOrders: {...state.selectedOrders, [order]: true}

删除：

selectedOrders: state.selectedOrders.filter(o => o !== order)

你甚至可以使用 Set，但我不知道 Redux 状态是否特别支持它。

推荐阅读