使用Redux重新应用操作/操作历史记录

Question

我使用Redux（使用React）来处理我的应用程序中的状态。我有以下情况：

1. 加载项目列表
2. 将变换应用于列表（任意数量的变换）
3. 减少列表中的显示项目
4. 增加列表中显示的项目

在第4步：我如何最好地再次增加显示的项目，步骤1的变换仍然应用/重新应用？

一个例子：

1. 装载列表包含50个项目
2. 大写项目
3. 过滤项目以显示少于4个字符的项目（=＆gt;结果 30项）
4. 再次应用过滤器以显示少于10个字符的项目（=＆gt;应该会产生50个项目，所有项目仍然是大写的）

Answer 1

根据您的描述，应该保留在商店中的唯一实际状态是初始数据和有关当前过滤器的信息。例如，您的状态形状可能如下所示：

{
  items: ['April', 'Jake', 'Mary', 'Zooey', 'Dan'],
  filters: {
    isUppercase: false,
    maxLength: 10
  }
}

当您更改数据时，items缩减器将处理添加和删除项目。当您更改过滤器时，filter减速器将记录新的过滤器设置。

现在是重要的一部分。 为组件选择数据时会发生实际过滤。

我们建议将最小可能状态存储在Redux中。在这种情况下，列表本身和有关过滤器的信息是最小可能状态。 应用过滤器的当前列表始终可以从状态计算，因此不应处于状态。

相反，您可以编写一个纯函数，根据当前状态选择数据：

function filterItems(items, filters) {
  return items.filter(item => {
    // return true or false depending on your logic
  })
}

现在，如果您使用React，可以使用render()方法调用它：

var filteredItems = filterItems(this.props.items, this.props.filters)

您可能会发现在每个渲染上重新计算它可能效率很低。值得庆幸的是，解决方案很简单：memoization。确保仅在输入更改时重新计算派生数据。 Reselect是一个很小的库，可以让你这样做，它通常与Redux一起使用。

您可以在Redux网站的官方Computing Derived Data食谱和Reselect README中找到有关此主题的更多信息。