useSelectors

The big brother of useSelect 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}.`)
);

PrevioususeSelect NextuseActions

Last updated 3 years ago

Was this helpful?