问题标签 [reselect]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - React 样板性能问题
我正在处理一些性能问题。当我有约 40 个元素的 ImmutableJS 映射(显示为复选框)时,当切换复选框(通过 redux)时,开发工具会向我抛出违规信息:
[Violation] 'click' handler took 231ms
这是因为我糟糕地创建了一个子状态吗?
react-native - 在 React Native 中检测热重载
是否有一个变量可以公开 React Native 中当前热重载的 ID / 计数,或者其他任何检测热重载的方式?
对于上下文,我require
在重新选择选择器后面有一个动态,当所需文件之一发生更改时,它不会失效。如果是真的,我可以通过使用效率较低的实现来解决这个问题__DEV__
,但我更喜欢可以添加为选择器依赖项的东西。
javascript - 重新选择选择器功能未执行
我正在尝试使用重新选择来选择表单是否有效,但选择有效性的函数永远不会运行:
我将它导入到一个组件中并尝试在一个预先存在的中使用它mapStateToProps
:
我尝试在这个阶段只显示值:
但是显示的是一个变成字符串的函数。
我哪里错了?
这是使用它的整个组件,以防万一它是相关的:
angular - 如何实现重新选择以获取我的 ngrx/store 的数据?
我正在使用 ngrx/store 设计一个 Angular 2 应用程序。我的状态目前看起来像
我想要每个 Poll 对象中所有投票标题的列表。poll_title 是存在于每个 Poll 对象上的属性。
如何从重新选择中实现 createSelector 以获取包含所有投票标题的数组?
redux - 防止重新选择重新计算,直到所有数据操作完成
我有一个非常通用的 Redux(嗯,rxjs-store)结构。基本上,我的数据类型都是称为“元素”的通用数据结构的所有不同版本(每个都由不同的“元素类型”定义)。
目标是当新数据对象出现时,我不必向存储、API、后端、数据库等添加一组全新的数据对象。
到目前为止,这运行良好,但我遇到了 Redux & Reselect 的问题,其中选择器会重新计算多次。
这是一个例子。对于我的页面,我需要加载 4 组特定类型的元素:
elementTypeManager 和 elementManager 是发送 Redux Action 的服务,并使用 reselect 来查询 store,如下所示:
该Load Elements
操作触发一个 http 请求以检索数据,并发出一个Store Elements Data
操作,reducer 将其接收并放入存储中。
重新选择选择器非常简单,如下所示:
它接受元素,并按指定类型过滤。
问题是,动作是按顺序调用的:
然后,按顺序存储:
每次 reducer 将数据放入 store 时,reselect 都会重新计算。当然,它还没有完成所有数据的放入,所以其他选择器返回 0 结果。
结果,我CombineLatest
发出了 4 次,一次只发出DistributionNetworkNode
数据,一次发出DistributionNetworkNode
和Socket
数据,一次发出DistributionNetworkNode
,Socket
和Area
数据等。
这是我的数据结构方式以及我如何使用重新选择的持续问题,我不确定如何在不影响数据结构的通用方式的情况下克服它。
在使用重新选择查询/发送数据之前,如何确保我的所有 Store Element Data 操作都已发生?
reactjs - 为 Reselect createSelector 函数分配正确的类型
编辑:添加 package.json 摘录
我正在尝试在现有的 React 项目中实现打字稿,但我在使用Reselect库时遇到了困难。Typescript 编译器坚持导入 createSelector 函数的第一个定义,并且未能识别出我的函数的签名对应于另一个定义。
它导入的定义:
我想使用的一个:
这是我的实际代码:
如果对我有任何帮助,这里是我的 ts.config:
我对 TypeScript 并不完全满意,所以我的实现肯定有问题。让我烦恼的是,如果我编写最简单的重新选择器,即只有 1 个选择器和 arity 1 的组合器,它会通过类型检查,这给我的印象是编译器没有在重载函数中正确选择正确的定义重新选择的index.d.ts
以下是我的 package.json 的相关部分:
javascript - 你如何使用`reselect`来记忆一个数组?
假设我有一个具有这种状态结构的 redux 存储:
这家商店通过接收物品的全新价值来发展:
我想显示一个呈现 SubItem 视图列表的 Root 视图,该视图仅提取状态的一部分。例如,SubItem 视图只关心 foo,并且应该得到它:
由于我只关心状态的“子部分”,这就是我想要传递给“哑”根视图的内容:
我可以很容易地连接这个组件来订阅状态的变化:
我的基本问题是当我不关心的状态部分 ( bar
) 发生变化时会发生什么。甚至,当我收到一个项目的新值时,既foo
没有也没有bar
改变:
如果我使用“天真的”选择器实现:
然后列表在每次调用时都是一个全新的对象,并且我的组件每次都被渲染,没有任何意义。
当然,如果我使用“常量”选择器,它总是返回相同的列表,因为连接的组件是纯的,它会被重新渲染(但这只是为了说明连接的组件是纯的):
现在,如果我使用 List 更改但包含相同元素的“almostConst”版本,这会变得有点棘手。
现在,可以预见的是,由于列表不同,即使里面的项目相同,组件也会每秒重新渲染一次。
这是我虽然“重新选择”可以提供帮助的地方,但我想知道我是否没有完全错过这一点。我可以reselect
使用这个来表现:
但它的行为与天真的版本完全一样。
所以:
- 尝试记忆一个数组是没有意义的吗?
- 可以重新选择处理吗?
- 我应该改变国家的组织吗?
- 我应该使用“deepEqual”测试在根上实现 shouldComponentUpdate 吗?
- 我应该放弃 Root 作为连接组件,并让每个 LeafItems 本身成为连接组件吗?
- immutable.js 有帮助吗?
- 这实际上不是问题吗,因为 React 很聪明,一旦计算了虚拟 dom 就不会重新绘制任何东西?
我试图做的事情可能毫无意义,并在我的 redux 商店中隐藏了一个问题,所以请随意陈述明显的错误。
reactjs - 如何通过不可变原则迭代更新redux状态的每一个key
我的 redux 状态如下:-
我将在行动中传递关键值:-("facebook","twitter")
假设我通过了“facebook”。然后我希望将状态更新为
这是我的减速器功能
第一次,它将给出预期的结果。
现在让我们说,我正在传递密钥“twitter”
我想要的是:
我用上述减速器功能得到了什么(如预期的那样)
所以我更新了我的减速器功能如下: -
但这违背了不可变数据的redux原则。因为我也在使用选择器,所以它显示了一些意想不到的行为。
如何更新我的reducer函数,它将所有先前设置的值设置为false,并且只将当前键设置为true,记住redux的不可变数据原则
javascript - 多个组件使用同一个选择器,重新选择
我正在使用重新选择库。我有很多组件,每个组件都(在它们的 stateProps 中)连接到某个选择器(通过重新选择实现,我们将其称为选择器 A)。每次选择器 A 的参数之一(也选择器让我们称为 B、C、D)发生变化时,选择器 A 会重新计算并为每个连接的组件单独调用。由于这个计算很密集,这让我在性能上付出了很多。有没有办法避免这种情况并一劳永逸地计算?谢谢
reactjs - 为什么 Redux 使用术语“选择器”?
“选择器”这个词对我来说听起来很混乱。
在官方文档Computing Derived Data中。将映射过程命名为“选择”是有意义的,因为您确实在过滤某些内容。有点“选择不同的 redux 商店”。
但理论上,您可以在函数中进行任何类型的计算MapThingsToProps
,例如将扁平数据结构转换为 UI 组件所需的嵌套数据结构,或计算一些临时数据。
诸如“Adaptor”、“Data Transformer”甚至“Mapper”之类的名称是否比“Selector”更好?
或者如果我误解了“选择”或“选择过程”的含义?
谢谢!