问题标签 [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.

0 投票
1 回答
716 浏览

redux - Redux / Reselect - 选择器重用

我是选择器的新手。我创建了以下内容:

第三个选择器(addSelected - 最后一个底部,注释掉的版本)与第一个选择器基本相同(具有不同的输入)。我怎样才能使它更通用,以便我可以重用它而不是再次编写整个“减少”行?

0 投票
0 回答
135 浏览

javascript - 如何记录一个非常深且复杂的函数式 JavaScript 代码的程序流程?

我试图了解这个重新选择库中函数的流程。我目前console.log用来记录输出。尽管如此,还是很难理解流程。让我想想函数式编程是多么复杂!!!

如何使用 ES6 装饰器或代理或任何其他语言功能拦截调用并将函数名称和参数记录到控制台?

0 投票
1 回答
338 浏览

reactjs - 如何在反应样板中使用重新选择

我在用react-boilerplate

,并且我正在构建一个小型项目,以便我可以了解选择器的使用。

我观看了这个我非常喜欢的视频,并且我相信我清楚地了解应该在哪里使用选择器。

所以视频说的是,当我们想要组合 2 个或多个 redux 状态并因此具有组合状态时,我们应该使用选择器(如果我错了,请随时纠正我)。

因此,鉴于该定义,我有以下问题,

  1. 在使用样板文件时,即使我不必组合 2 个或更多状态,我是否应该使用选择器?

例如,我写了下面的选择器

如果你问我,这没有多大意义,但我喜欢在我的项目中保持统一,这样每次我需要访问一些旧代码时,我都可以轻松地遵循相同的流程。

  1. 是否有任何食谱可以让我看到其他更有经验的人如何将选择器与样板一起使用?我已经看过样板的例子,但我不认为我要找的东西在那里(如果我错了,请再次纠正我)。

预先感谢人们

0 投票
0 回答
129 浏览

redux - 如何为包含全局和本地派生数据的集合构建 Redux 选择器?

如何构建一个 Redux 选择器来收集全局和本地派生数据?

我有一些看起来像这样的数据:

我需要添加一些计算得出的派生属性。DerivedRootComputedFromPaletteAndDerivedRoot

我查看了重新选择,但不确定它是否是在这种情况下使用的正确工具。

单个孩子的RootData值可能会改变,我不希望选择器应用于完整的孩子集合,因为这会在单个孩子发生变化时重新记忆所有孩子。此外,任何时间palette更改子选择器都可以重新计算新值ComputedFromPaletteAndDerivedRoot

0 投票
1 回答
5757 浏览

javascript - 在选择器中获取数组的最后 2 个元素(Redux)

数组以 [] 开头,然后随着添加的数字不断增长。

我正在尝试创建一个选择器来提取数组的最后两个元素。

我有以下内容:

它显示初始 0,但随后不输出任何值。请指教。如果仅出于测试目的,我会:

它在添加数组元素时正确输出它们。

编辑:

根据下面的答案,答案是:

0 投票
1 回答
804 浏览

ngrx - 用户注销时从 ngrx/redux 存储中清除状态的问题

我的应用程序使用ngrx/rxjs。我依靠 ngrx 效果从商店中注销和清除状态。

不幸的是,因为我的一个组件通过选择器订阅了商店(见下文:)getLatestMessagesByCounterParty,并且因为在该组件被销毁之前清除了状态,所以我收到以下错误:

错误类型错误:无法在 getCurrentUserAccountId 处读取 null 的属性“id”

...表示 i​​s ,这currentUserAccountnull非常合乎逻辑的,因为我刚刚从商店中清除了状态。

这是signout$效果:

这是订阅登录状态的组件:

以及相关的选择器:

我正在寻找关于何时、何时以及如何从商店中清除状态的最佳实践。理想情况下,我希望在订阅组件已被销毁的最后时间这样做。

有人可以建议吗?

编辑:让我进一步完善我的评论。我上面的代码应该如下所示。

0 投票
2 回答
1399 浏览

reselect - 创建采用动态参数的重新选择选择器的问题

我正在尝试将动态参数传递给重新选择选择器。原因是这个参数实际上是一个预先不知道的角度路由参数。它也不能成为国家的一部分。

以下是传递路由参数的订阅组件的相关代码:

这是选择器的代码:

这是我得到的错误:

“数字”类型的参数不能分配给“状态”类型的参数。

我想将otherId论点传递给messagesWithOtherUserAccount createSelector,但我不确定如何...

有人可以帮忙吗?

0 投票
3 回答
5458 浏览

oop - Is there any place for OOP in redux?

I've been using object-oriented programming practices for 25 years and trying to move toward functional programming for the last 5 years, but my mind always goes towards OOP when I'm trying to do something complex and, especially now that ES6 supports decent OOP syntax, that's the natural way for me to build stuff.

I'm now learning Redux and I understand (c.f. How to put methods onto the objects in Redux state?) that it's a no-no to put class instances in your reducers; and the recommended method for computing on top of plain reducer state is by using selectors (e.g., via reselect). And, of course, React recommends composition over inheritance (https://facebook.github.io/react/docs/composition-vs-inheritance.html, React redux oop classes).

But is there any place in the React/Redux ecosystem for class objects with methods and inheritance?

I guess, to sort of answer my own question, OOP classes encourage the addition of data properties and operations on the data in the same place, which is nice for readability, but doesn't fit well with pure functions and immutable data.

If I was going to use OOP, would I need to chuck the idea of having my instances persist and maintain state for any amount of time? Like, every time I want to use one, I would instantiate it from store data, use whatever methods I want, and throw it away? That might obviate a lot of the impetus to use OOP classes. But if I keep instances around, I'll have headaches keeping them synced with the store.

So, is the answer to always use selectors when I'm tempted to use methods and always use composition when I'm tempted to use inheritance? Specifically, I mean when storing and manipulating data held in a Redux store for use in React components. And, if so, where should it fit in? Connected to selectors? Immediately disposable like I suggested?


Adding my use case for clarity: My data is basically a huge graph: lots of objects with lots of properties and lots of relationships between objects. It's read only, but complex. My objects are called "concepts".

Before making the (probably foolish) decision to migrate to Redux, I used classes to structure and represent concepts, sets of concepts, and relationships between concepts. My classes included async api logic to fetch concept sets, information about each concept, and information about other concepts that each concept is related to. If the user chose to drill down, the classes would recursively fetch and instantiate new concept sets. The Redux documentation recommends flat, normalized structures for nested data (http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html) which is probably wise for storage, but my OOP model was good for traversing sections of the graph and stuff. I have a hard time wrapping my head around using selectors and immutable state that might involve nesting, potentially with cycles, or needing to make async calls for more data.

I'm successfully using https://redux-observable.js.org/ for the api stuff.

Maybe @Sulthan's answer is right: I should feel free to use OOP techniques in my Redux application. But it still seems weird. I can't keep my objects around because if the store changes (more data is fetched, for instance), my objects can get stale. If my objects are nested but my store is normalized, I'll instantiate them (from selectors) when I need them and make sure not to keep them around...

0 投票
2 回答
1750 浏览

performance - React-redux 重选性能

在 react redux 应用程序中使用 reselect 时,我有一个关于性能的问题。

Reselect 库用作记忆层来缓存为性能而进行的计算,但是如果您不需要完成任何计算/逻辑怎么办?

对单个数据使用选择器是否更高效,或者我应该只使用标准连接方法?

0 投票
1 回答
174 浏览

javascript - 大列表的过滤性能

我有一个约 5000 个元素的列表,我想过滤它,searchPhrase由用户给出。通常用户输入过滤短语的第一个字母,然后是第二个,然后是第三个。例如用户类型'a',然后'ab',然后'abc'

我正在尝试使用 reactjs/reselect 库来提高过滤性能。我在自述文件中的示例中使用了这个库: 示例 我改变了这个方法:

对该实施:

我注意到每次用户键入下一个字母todos.length属性时都是相同的。不应该在更长todos.length的时候更短吗?searchPhrase我认为没有 reactjs/reselect 的性能是一样的。

todos当先前searchPhrase是实际的子字符串时,是否有可能过滤较短的列表searchPhrase