What does the ngrx selector do?

I am trying to better understand Maxime's answer to this question . My representative is not tall enough to comment on the answer, so I will ask a new question here.

The part about setting a normalized state makes sense. Then he continues to talk about how you will create the selector, this part of his answer is given below and his code block is shown.

In your logic or view (e.g. using Angular) you need your nested structure so that you can iterate over your array, and therefore you don't want to iterate over a string array of identifiers. Instead, you want actualContent: ActualContent [] ;.

To do this, you create a selector. Each time your store changes, your selector will start and generate a new “look” 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, is there still a type definition BlogContentwith an array actualContentnested?

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

I don’t quite understand what the selector does getBlogContentsand how it will be used in the component that wants to display blogContents with the actualContents nested list, can this be explained in more detail?

+4
source share
2 answers

@cartant pinged me on my original question , so I'm here (thanks @cartant!).

. , , :).

, , :

:
 -
 -
 - ,
 - ( , , , ..)

"", :
 - , , byId allIds
 - , , ( , , )

angular-ngrx-starter, .

, , (, , , , , ).

, , , ! , .

+3

, BlogContent actualContent?

BlogContent actualContent.

, getBlogContents , blogContents actualContents, ?

Maxime , .

: https://github.com/maxime1992/pizza-sync/blob/master/frontend/src/app/shared/states/orders/orders.selector.ts

: https://github.com/maxime1992/pizza-sync/blob/b127ef963640d67f7560fad69f6f8364355ac697/frontend/src/app/features/order-summary-dialog/order-summary-dialog.component.ts

ngOnInit() {
    this.orderSummary$ = this.store$.let(getOrderSummary);
}

, . ngrx, , reselect.js .

+1

Source: https://habr.com/ru/post/1016842/


All Articles