Angular + redux + ngrx：获取数据答案

【问题标题】：Angular + redux + ngrx: get dataAngular + redux + ngrx：获取数据
【发布时间】：2017-04-26 12:39:37
【问题描述】：

我正在使用 redux 编写我的第一个 Angular 2/4 应用程序（我是这种模式的新手），但我遇到了一个问题。我~正在使用@ngrx/store

有一个模型，称为内容。我的商店 (app.store.ts) 是：

export interface AppStore {
    contents: {id: number, Content};
    contentContents: {id: number, Array};
}

'contents' 包含所有内容的列表（id 1，内容 1；id 2，内容 2）。 'contentContents' 有一个内容列表及其子项。内容可以有子内容。所以我想保留一个对象：

{ 1: [2, 3, 6], 2: [7, 9, 10], 6: [11, 4, 5] }

我的减速器已经在这样做了，但我必须解决问题。

我已经选择了contentContents：

let subscription = this.store.select( store => {
    return store.contentContents;
})

并订阅它：

subscription.subscribe( contentContents => {

})

有没有办法从 contentContents 订阅特定项目？我的意思是，我想知道 contentContents 中的特定项目何时更改。示例：显示内容 #1 的组件只有在 contentContents[1] 更改时才会被警告，但在我构建的方式中，每次 contentContents 更改时都会被警告。

另外，如果我能解决第一个问题：有没有办法从商店查询来自特定 id 的内容？

假设我有这个： 1: [2, 3, 6] 内容#1 具有内容#2、#3 和#6 作为子项。如何获取内容#2、内容#3和内容#6

【问题讨论】：

你不应该这样做subscription.subscribe。订阅应该是subscribe 的返回。（这有助于在组件被销毁时取消订阅）

标签： javascript angular redux ngrx

【解决方案1】：

试试这个。

subscription.map(contentContents => 
contentContents.filter(contentContent.id === reqContent.id));

subscription.subscribe( contentContent => {
  console.log('contentContent', contentContent);
})

【讨论】：

【解决方案2】：

您已经在不久前问过这个问题，但也许仍然有用：

NGRX 具有记忆选择器，这些选择器会在您使用 select 函数时自动创建或可以显式创建：https://github.com/ngrx/platform/blob/master/docs/store/selectors.md

因此，为了获得有关某个特定项目更改的通知，我会编写一个函数，以便选择该项目。就像是 function getContentById(id:number,contentContents){ return contentContents.filter(contentContent.id === id)); }

然后创建一个利用这个函数的 observable：

content1$ = this.store.select(s => getContentById(s.contentContents,1))

并在用户界面中使用异步管道订阅它，而不是在组件中显式订阅 <div>{{content1$|async}}</div> 这样就不需要手动退订了 https://angular.io/api/common/AsyncPipe

【讨论】：