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
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));
}
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
try this.
subscription.map(contentContents =>
contentContents.filter(contentContent.id === reqContent.id));
the subscription
subscription.subscribe( contentContent => {
console.log('contentContent', contentContent);
})