What is this ngrx selector doing?

Question

I'm trying to better understand the answer by Maxime to this question. My rep is not high enough to comment on the answer there, so I'll ask a new question here.

The part about setting up a normalized state makes sense. Then he goes on to talk about how you would create a selector, this part of his answer is quoted below, and showing his code block.

In your logic or view (for example with Angular), you need your nested structure so you can iterate over your array and thus, you don't want to iterate on a string array of IDs. Instead you'd like actualContent: ActualContent[];.

For that, you create a selector. Every time your store change, your selector will kicks in and generate a new "view" of your raw data.

// assuming that you can blogContentsState and actualContentsState from your store
const getBlogContents = (blogContentsState, actualContentsState) =>
  blogContentsState
    .allIds
    .map(blogContentId => ({
      ...blogContentsState.byId[blogContentId],

      actualContent: blogContentsState
        .byId[blogContentId]
        .actualContentIds
        .map(actualContentId => actualContentsState.byId[actualContentId])
   }));

My question is, whether or not there is still a type definition of BlogContent with an actualContent array nested?

export interface BlogContent {
  id: string;
  header: string;
  tags: string[];
  title: string;
  actualContent: ActualContent[]; <------ NESTED
}

I don't quite understand what the selector getBlogContents is doing and how this would be used in a component that wants to display blogContents with a nested list of actualContents, can this be explained in a little more detail?

What is this ngrx selector doing?

2 Answers