问题标签 [reselect]

我正在寻找提高我的 React 应用程序性能的方法。经过一番搜索，我研究了重新选择。但我不确定这个例子是如何工作的。

在示例中，它指出todos每次更新组件时都会计算，这会损害性能。所以它介绍了使用记忆选择器来克服它。

getVisibleTodos如果我放入组件render功能会有区别吗？我想做什么是这样的：

containers/VisibleTodoList.js

在这种情况下，getVisibleTodos不会调用除非todos或visibilityFilter更改。正确的？我的修改和选择器一样吗？我错过了什么吗？

假设我animals在 redux 商店。它是一个规范化的对象，键是对象，id值是对象本身。每只动物都有一把钥匙is_dog。

我有一个DogsList连接的反应组件，它查看存储状态并将数组传递dogIds给 UI 组件。的计算dogIds类似于：

dogIds = _.chain(state.animals).filter('is_dog').map('id').value();

在上面的示例中，这将返回['id1', 'id4'].

但是，假设我有数千只动物，并且每只动物都有其他经常变化的属性，比如currentLocation,lastFed等。我知道只有在任何动物发生变化dogIds时才会改变is_dog，但我不太确定如何不做过滤器并对任何动物的每次变化进行不必要的映射计算。我尝试使用reselect，但我认为在这种情况下它真的没有帮助。

我倾向于dogIds正确存储在 redux 中，并且仅在相关时手动更新它。就像将一只新狗添加到 中animals，或者如果一只猫变成了一只狗（我的类比在这里分崩离析）。但是我觉得通过将计算属性保存在 redux 存储中我做错了。

我真的不明白重新选择如何减少组件的渲染。这是我没有重新选择的：

它根据某个值从某个列表中组合一个元素。每次状态发生变化时都会调用渲染，例如我的console.log输出：

因为商店的不同部分正在发生一些事情。因此，该组件被渲染了 5 次，其中 2 次是冗余的。

但是使用重新选择：

这是我的第一个选择器console.log输出：

第二：

并且组件被正确渲染 - 3次！

为什么呢？为什么组件只渲染了 3 次？这里到底发生了什么？

基于我刚刚阅读并重新阅读的所有 Redux 和 Reselect 文档，thing.toJS()如果getThing()返回的不可变映射不等于前一个，则下面的选择器应该只进行处理。

除非我有一个孩子的“智能”组件，否则这是正确的。在这种情况下，当父组件触发渲染时，子组件容器中调用的选择器总是处理该值，而不管结果是否是新的。

我一直在尝试将 ImmutableJS API 封装在我的选择器中，但这意味着要避免每次它们的父组件更新时重新渲染这些嵌套组件，我必须在shouldComponentUpdate函数中进行深度相等检查。这很昂贵，而且似乎不是一个体面的解决方案。

应用程序状态被规范化，因此状态树的更新部分不是子组件所依赖的状态部分的分层父级。

我在这里错过了一些关键吗？

我正在开发一个 Redux 项目，其中包含一堆组合的减速器

每个 reducer 更新 store 的一个分支

现在我正在尝试添加需要访问商店的两个分支而不重构整个项目的逻辑。例如，我想要一个能够执行以下操作的减速器：set c3 = f(a1, a2).

目前我正在尝试使用重新选择，但我迷路了。在 reducer1/selector.js 我有

我正在尝试创建一个减速器

但是，当调用 setC3 时，derivedVariableSelector 将永远不会收到足够的存储来完成其工作。它要么接收包含 a1 的分支，要么接收包含 a2 的分支，但我不知道如何同时提供这两者。这可能吗？

我正在创建一个React应用程序并使用react-boilerplate作为我的基础项目。在了解了Redux、Sagas并重新选择并运行了我的第一个组件之后，我想编写相应的单元测试。但不幸的是，我无法使用相应的选择器对 select 语句进行测试以正确测试：

从我的角度来看，这个测试应该可以工作，但它会失败并显示（不是很有帮助）错误消息：

预期 Object({ @@redux-saga/IO: true, SELECT: Object({ selector: Function, args: [ ] }) }) 等于 Object({ @@redux-saga/IO: true, SELECT: Object( { 选择器：函数，参数：[ ] }) })。

为了更容易重现问题，我创建了一个带有所需环境的JSFiddle 。也许有人可以告诉我我做错了什么。

当我将更多选择器组合在一起时，我发现我正在重新排序选择器的定义位置。例如，

这是一个简单的示例，但我无法在 selectNavAndPageAndFoo 下定义 selectNavAndPage。随着越来越多的选择器组合起来并且选择器的选择器组合起来，那么我需要确保在使用它们之前在顶部定义所有子选择器。

有没有办法创建这些选择器，这样排序就无关紧要了？

状态由一个随机创建数字数组 (+ 0) 的函数进行水合，如下所示：

[[3, 0], [6, 0], [8, 0], [2, 0].....]

这就是应用程序目前的状态。[3, 0] 是包含数字 3 且不可见 (0) 的图块示例号码 (3)

所以如果我点击第一个图块，状态会变成：[[3, 1], [6, 0], [8, 0], [2, 0].....]

现在，我想添加以下内容：

• 随时跟踪未发现的瓷砖数量（即，将 1 作为第二个元素）。

• 将未覆盖的瓷砖数量限制为 2（如果第二个瓷砖的数量与第一个不匹配，则两者都被再次覆盖 - 许多记忆游戏具有类似的功能）

• 如果我揭开一个瓷砖然后第二个和数字匹配，我希望它们永远保持未被揭开，我们将 +1 加到分数上。

我是否应该将其设计为主要状态的不同部分（使用不同的减速器，然后使用 combineReducers）？或者我应该重新设计状态的第一部分以包括它如下：

现在更改 score 和 number_of_uncovered_tiles 的值 - 我是否正确，我不应该使用操作，而是选择器，因为两者都将根据网格数组元素值的状态自动计算？

我从重新选择库中获取了以下代码。

当subtotalSelector用 调用时exampleState，它将调用createSelector接受输入参数的函数exampleState。

我的问题是关于createSelector接受exampleState和其他功能如何使用它？发生了一些我不明白的参数的隐式注入。

通过subtotalSelector替换输入参数更容易解释。

我已经开始学习选择器和 redux。应用程序的状态如下所示：

然后展开：

我正在尝试添加一个选择器，该选择器将计算子数组第一个元素的总数，例如（6 + 4 + ...，等等），但首先要做的是：

我已经开始编写一个选择器（现在只是为了显示任何东西）：

然后一个容器有：

但我收到一个错误：无法读取未定义的属性“0”。

整个代码可以在这里看到： https ://github.com/wastelandtime/memgame

请指教。谢谢