Angular + Redux + NGRX：获取数据

Question

I'm writting my first Angular 2/4 application with redux (I'm new to this pattern), and I'm stuck in a problem. I~m using @ngrx/store

There is a model, called Content. My store (app.store.ts) is:

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

'contents' has a list of all contents (id 1, content 1; id 2, content 2). 'contentContents' has a list of contents and its child. A content can have child contents. So I want to keep an object like:

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

My reducers are doing this already, but I have to problems.

I have selected the contentContents:

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

and subscribed to it:

subscription.subscribe( contentContents => {

})

is there a way to subscribe to a particular item from contentContents? I mean, I want to know when a particular item from contentContents is changed. Example: the component what is displaying content #1 has to be warned only when contentContents[1] is changed, but in the way I have built it is being warned everytime the contentContents is changed.

Other thing, if I can resolve the first problem: is there a way to query from the store the content from a particular id?

Let's say that I have this: 1: [2, 3, 6] Content #1 has contents #2, #3 and #6 as child. How to get content #2, content #3 and content #6

Answer 1

try this.

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

the subscription

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

Answer 2

Already a while ago that you asked this but maybe still usefull:

NGRX has memoized selectors which are automatically created when you use the select function or which can be created explicitly: https://github.com/ngrx/platform/blob/master/docs/store/selectors.md

So to get notified about a change of one specific item I would write a function so select that item. Something like function getContentById(id:number,contentContents){ return contentContents.filter(contentContent.id === id)); } function getContentById(id:number,contentContents){ return contentContents.filter(contentContent.id === id)); }

Then create an observable which utilizes this function:

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

and subscribe to this in the userinterface with an async pipe instead of an explicit subscribe in your component <div>{{content1$|async}}</div> In this way you don't need to unsubscribe from the subscription manually https://angular.io/api/common/AsyncPipe