2

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

以下是我的用例：

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

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

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

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

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

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

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

在此先感谢， 苏达卡尔

4

3 回答 3

7

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

从组件方面

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

从选择器端

export const getComments = (user_id) => createSelector(
  getData,
  (store) => store.comments 
);
于 2018-05-16T16:35:47.983 回答
1

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

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

有关更多信息和不同方式，请查看我的文章NgRx：参数化选择器

于 2019-01-06T12:30:15.600 回答
0

@ 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 的结果。

于 2020-12-18T23:39:23.237 回答