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

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

加载项目列表

将变换应用于列表（任意数量的变换）

减少列表中显示的项目

增加列表中显示的项目

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

例如：

加载包含50项的列表

大写项目

筛选项目以显示少于4个字符的项目（=>结果为 （30项）

再次应用过滤器以显示少于10个字符的项目（=>应产生50个项目，所有项目仍大写）

---

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

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

当您更改数据时，

items

reducer将处理添加和删除项的操作。更改过滤器时，

过滤器

减速机将记录新的过滤器设置

现在是重要的部分当为组件选择数据时，会进行实际筛选。

我们建议在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)

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

您可以在Redux网站上的官方配方中找到有关此主题的更多信息，并在中找到。
我能想到的最好方法是扩展每个列表项，例如大写和最多5个字符）：
[{value:'text'，displayValue:'text'，filtered:false}，{value:'other text'，displayValue:'other text'，filtered:true}]
这是解决这个问题的简单方法，但我想知道惯用的方法是什么。