Using selectors with ngrx data

Question

how can we use memoization capabilty of selectors using ngrx data with their capabality?

How to create selectors from ngrx data "entityCache" state inside store?

Thank you

score 1 · Answer 1 · answered Sep 25 '19 at 21:10

Can you clarify what kind of selector you are looking for? The EntityCollectionService has a bunch of preset selectors, though the documentation is not extensive. Here is a list of the "built-in" selectors per the source code.

  /** Observable of the collection as a whole */
  readonly collection$: Observable<EntityCollection> | Store<EntityCollection>;

  /** Observable of count of entities in the cached collection. */
  readonly count$: Observable<number> | Store<number>;

  /** Observable of all entities in the cached collection. */
  readonly entities$: Observable<T[]> | Store<T[]>;

  /** Observable of actions related to this entity type. */
  readonly entityActions$: Observable<EntityAction>;

  /** Observable of the map of entity keys to entities */
  readonly entityMap$: Observable<Dictionary<T>> | Store<Dictionary<T>>;

  /** Observable of error actions related to this entity type. */
  readonly errors$: Observable<EntityAction>;

  /** Observable of the filter pattern applied by the entity collection's filter function */
  readonly filter$: Observable<string> | Store<string>;

  /** Observable of entities in the cached collection that pass the filter function */
  readonly filteredEntities$: Observable<T[]> | Store<T[]>;

  /** Observable of the keys of the cached collection, in the collection's native sort order */
  readonly keys$: Observable<string[] | number[]> | Store<string[] | number[]>;

  /** Observable true when the collection has been loaded */
  readonly loaded$: Observable<boolean> | Store<boolean>;

  /** Observable true when a multi-entity query command is in progress. */
  readonly loading$: Observable<boolean> | Store<boolean>;

  /** ChangeState (including original values) of entities with unsaved changes */
  readonly changeState$:
    | Observable<ChangeStateMap<T>>
    | Store<ChangeStateMap<T>>;

We need somehow to use this ` constructor(private authDataService: AuthDataService, private authEntityService: AuthEntityService, private authEntitySelectorFactory: AuthEntitySelectorFactory) const collectionSelectors = authEntitySelectorFactory.createCollectionSelector('auth'); collectionSelectors.projector ?? — Marko Debač, Oct 02 '19 at 19:48
And how do you create a selector? How do you create a featureselector from this EntityCollectionService? — , Oct 28 '19 at 18:16
MarkoDebač It is still unclear what you are trying to select. Can you give a more complete example? @altu What exactly are you trying to select from the entityCollection? That would be helpful to know. Can you also provide an example? — bkelley, Nov 13 '19 at 16:59
Check one of my questions, what's his name... Tim has answered there. I'm on mobile and can't do complex stuff right now — , Nov 14 '19 at 17:15

score 1 · Answer 2 · answered May 20 '20 at 16:26

For me at the beginning was a little bit confusing as well. The selectors are used behind a Facade Pattern.

Have a look at this article https://medium.com/@thomasburlesonIA/ngrx-facades-better-state-management-82a04b9a1e39, it may help you for having a better understanding.

ngrx/data uses by default that pattern (that's not ngrx, although you can create your own facade as in the article is explained).

Summarizing

----------------- ngrx -----------------

----------------- ngrx/data -----------------

you can find more in https://ngrx.io/guide/data/architecture-overview

... Your component also subscribes to one or more of the service's Observable selectors in order to reactively process and display entity state changes produced by those commands. ...

However, again from documentation seems very confuse...

Have a look to this picture

from https://slides.com/jiali/deck-5#/14, good read either.

In this last picture as @bkelley said, you can use EntityCollectionService, it is the Facade in ngrx/data

Hope this help

Using selectors with ngrx data

2 Answers2