Escrito el 08/08/2024

NGRX Store - Effects: Selectors

// component.ts

import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import * as fromStore from './store';

...
export class HomeComponent implements OnInit {

  constructor (private store: Store<fromStore.ProductState>){

  }

  ngOnInit() {
    // usando un string para seleccionar la propiedad del store
    // devuelve un ProductState
    this.store.select<any>('products').subscribe(state => console.log(state));

    // utilizando los selectors
    this.store.select(fromStore.getProductData).subscribe(state => console.log(state));

    // utilizando una variable observable
    this.products$ = this.store.select(fromStore.getProductData);
  }
}

// selectors.ts

export const getProductData = createSelector(getProductState, (state: ProductState) => Object.key(state.data).map((id) => state.data[id]));
export const getProductLoaded = createSelector(getProductState, (state: ProductState) => state.loaded);
export const getProductLoading = createSelector(getProductState, (state: ProductState) => state.loading);