Where to filter state?

Question

Newbie question: I have an angular2 app using ngrx, I have a service that returns the state (array of observables) to a component.

My question is where do I filter the state if I want a read only subset of it to be used in the component?

Do I do it in the reducer, service, or component?

Answer 1

Some guidance can be found in the ngrx example application. There is a pattern in which selectors are defined alongside reducers:

/**
 * Because the data structure is defined within the reducer it is optimal to
 * locate our selector functions at this level. If store is to be thought of
 * as a database, and reducers the tables, selectors can be considered the
 * queries into said database. Remember to keep your selectors small and
 * focused so they can be combined and composed to fit each particular
 * use-case.
 */
export function getBookEntities() {
  return (state$: Observable<BooksState>) => state$
    .select(s => s.entities);
};

And those selectors are used in (smart) components to select/filter the state:

...
export class CollectionPage {

  books$: Observable<BooksInput>;

  constructor(store: Store<AppState>) {
    this.books$ = store.let(getBookCollection());
  }
}

This pattern/mechanism could be used to filter the state in either components or services - whichever best suits your architecture.