useSelect

A facade can be enhanced with usePick, which can proceed NgRx's selectors and transforms them into consumable Observable-streams.

This allows the facade to read data from different State-Slices that are not part of the facade itself.

Selector

To set up useSelect a property needs to be added to the facade that is assigned with usePick(). In the Component, each and every selector of the project can be passed to pick. The result type of the selector is inferred automatically and provides the correct type information.

chunk.ts

import { useSelect, StoreFacade } from '@ngrx-ducks/core';

@StoreChunk()
export class Chunk {
  select = useSelect();
}

component.ts

import { Component, OnInit } from '@angular/core';
import { Chunk } from './chunk';
import { greetings } from './selector';

@Component({ /* ... */})
export class SomeComponent implements OnInit {
  greetings: Observable<string[]>;
  
  constructor(private chunk: Chunk) {}
  
  ngOnInit() {
    this.greetings = this.chunk.select(greetings);
  }
}

selector.ts

import { createFeatureSelector, createSelector } from '@ngrx/store';

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

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

state.ts

export interface State {
  greetings: string[];
}

Selector with props

Pick also accepts selectors having properties (selectors with props). The pick-Function than expects a second parameter representing the properties (see component.ts).

chunk.ts

import { createDuck, useSelect } from '@ngrx-ducks/core';

@StoreChunk()
export class Chunk {
  select = useSelect();
}

component.ts

import { Component, OnInit } from '@angular/core';
import { Chunk } from './chunk';
import { greetingsIncluding } from './selector';

@Component({ /* ... */})
export class SomeComponent implements OnInit {
  greetings: Observable<string[]>;
  
  constructor(private chunk: Chunk) {}
  
  ngOnInit() {
    this.greetings = this.facade.select(greetingsIncluding, { term: 'good'});
  }
}

selector.ts

import { createFeatureSelector, createSelector } from '@ngrx/store';

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

export const greetingsIncluding = createSelector(
  feature,
  (state, props: { term: string }) => state.greetings.filter(g => 
    g.includes(props.term)
  )
);

state.ts

export interface State {
  greetings: string[];
}