NgRx Ducks
  • Introduction
  • @ngrx-ducks/core
    • Installation
    • Architecture
      • @StoreChunk
      • createDuck
      • getReducer
      • createMutableDuck
      • getMutableReducer
      • useSelect
      • useSelectors
      • useActions
    • Guides
      • Quick Start
  • Migrations
    • v15
  • Resources
  • FAQ
  • GitHub
  • Changelog
  • Sponsor
Powered by GitBook
On this page

Was this helpful?

  1. @ngrx-ducks/core
  2. Architecture

useSelectors

PrevioususeSelectNextuseActions

Last updated 3 years ago

Was this helpful?

The big brother of isbindSelectors.. It works similar, but useSelectors allows you to bind a group of selectors that become transformed to Observables at runtime.

If you add more and more selectors and they are bound to the facade already, the selectors automatically are available in you component without touching the facade again (see component.ts).

import { useSelectors, StoreChunk } from '@ngrx-ducks/core';

import * as selectors from './selectors';

@StoreChunk()
export class Chunk {
  select = useSelectors(selectors);
}
import { Component, OnInit } from '@angular/core';
import { Chunk } from './chunk';
import { greetings } from './selector';

@Component({ /* ... */})
export class SomeComponent implements OnInit {
  greetings: Observable<string[]>;
  greetingsRocket: Observable<string[]>;
  
  constructor(private chunk: Chunk) {}
  
  ngOnInit() {
    this.greetings = this.facade.select.greetings;
    this.greetingsRocket = this.facade.select.greetingsAnnotated('🚀');
  }
}
import { createFeatureSelector, createSelector } from '@ngrx/store';

const feature = createFeatureSelector<State>('some');

// Selector
export const greetings = createSelector(
  feature,
  state => state.greetings
);

// Selector taking parameters
export const greetingsAnnotated = (annotation: string) => createSelector(
  feature,
  state => state.greetings.map(g => `${annotation} ${g}.`)
);
useSelect