用于选择功能的 ngrx 参数答案

【问题标题】：ngrx parameter to select function用于选择功能的 ngrx 参数
【发布时间】：2017-09-08 05:10:13
【问题描述】：

有没有办法将参数传递给ngrx select函数？

以下是我的用例：

我正在维护商店中的 cmets 列表。

我写了一个组件来代表一个评论。所以，一个 CommentComponent 知道组件对象的 id

每条评论都会有 likelikeBy、reportBy、...等属性在 UI 中，我使用 *ngFor 显示所有组件

现在我希望我的 CommentComponent 使用组件的 id 只订阅一个评论对象。

现在我订阅了顶级组件中的所有 cmets，并将每个评论作为输入传递给 CommentCompoent。

当前的方法并不干净，因为角度变化检测策略（即使我使用 onPush）必须为所有 cmets 渲染 DOM，即使只有一个评论发生变化。

感谢我可以将评论 id 传递给选择器函数的任何建议，以便每个 CommentComponent 只能订阅一条评论。

提前致谢，苏达卡

【问题讨论】：

您是否在评论组件中订阅了您的评论？如果是，您应该订阅父组件中的数组并使用@input 传递它们中的每一个。你应该让你的评论组件尽可能的愚蠢；）
@Maxime 目前我正在做与您提到的相同的事情，但是每当任何一条评论发生变化时，角度都会花费太多时间来呈现
这很奇怪。开源回购？你能在 Plunkr 或 Stackblitz 上重现吗？
我知道这是旧的，但你在使用 track by 吗？这应该可以防止屏幕重新渲染 cmets 组件。你也找到了答案吗？我想要一个不同的用例。
追踪依据是什么？

标签： angularjs ngrx ngrx-store-4.0

【解决方案1】：

是的，您可以将参数传递给 ngrx 选择器，您可以这样做

从组件方面

this.store.select(getComments(user_id));

从选择器端

export const getComments = (user_id) => createSelector(
  getData,
  (store) => store.comments 
);

【讨论】：

这是否会通过每次返回一个新的选择器来防止记忆（我认为这是 createSelector 的主要目的）？这是官方文档中推荐的吗？
@Marcus，每次你使用getComments 都会创建一个新的选择器实例。因此，记忆化仍然适用于此。您可以阅读NgRx: Parameterized selectors 了解更多信息。
当你想覆盖这样的选择器时似乎效果不佳：ngrx.io/guide/store/testing#using-mock-selectors
模拟它可以通过模拟其他选择器来完成。但是当你对选择器本身进行单元测试时，没有办法提供初始状态ngrx.io/guide/store/testing#testing-selectors

【解决方案2】：

从 NgRx 6.1 开始，您可以使用带有 props 的选择器。

export const getCount = () =>   
  createSelector(     
    (state, props) => state.counter[props.id],     
    (counter, props) => counter * props.multiply
);

有关更多信息和不同方式，请查看我的文章NgRx: Parameterized selectors

【讨论】：

【解决方案3】：

@CularBytes我一直在解决一个类似的问题，使用这种方法进行测试有一段时间了，我想我已经找到了让它工作的方法。

用选择器

export const getItemsByProperty = (property: string, value: any) => createSelector(getAllItems, (items: ItemObj[]) => items.filter((item) => item[property] == value));

在哪里

export const getAllItems = createSelector(getState, (state) => selectAll(state.items));

在我的组件单元测试文件中，我用数据覆盖了 getItemsByProperty 的底层选择器调用 getAllItems 的选择器，然后在我的测试中期待过滤后的数据。如果您要返回的内容发生变化，则只需更新 getAllItems 的结果即可。

【讨论】：