select 函数的 ngrx 参数

Question

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

以下是我的用例：

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

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

每条评论都将具有 likedBy、reportedBy 等属性在 UI 中，我使用 *ngFor

显示所有组件

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

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

当前方法不干净，因为 angular 更改检测策略（即使我使用 onPush）必须为所有评论呈现 DOM，即使只有一个评论更改。

感谢任何可以将评论 ID 传递给 selector 函数的建议，以便每个 CommentComponent 只能订阅一个评论。

提前致谢，苏达卡尔

Answer 1

是的，您可以将参数传递给 ngrx 选择器，您可以通过这种方式实现

从组件端

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

从选择器端

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

Answer 2

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

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

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

Answer 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 的选择器，然后期望在我的测试中过滤数据。如果您想 return 更改，则只需更新 getAllItems.

的结果

select 函数的 ngrx 参数

ngrx parameter to select function

angularjs

ngrx

ngrx-store-4.0