Mi entendimiento después de leer la documentación es que para obtener valores de una tienda NgRx, tenemos que usar selectores. Hasta ahora, he tenido suerte al hacerlo, solo con un pequeño problema relacionado con la escritura, lo que me preocupa si mi implementación es incorrecta de alguna manera.
Entonces, digamos que quiero recuperar un valor numérico de la tienda, id por ejemplo. En mi componenteName.component.ts accedería a este valor así:
id$ = this.store.select(selectId); donde selectId se define a partir de otro archivo como:
export const selectData = (state: AppState) => state.data; export const selectId = createSelector( selectData, (state: DataState) => state.id, ) Puedo acceder fácilmente a id$ en mi componente HTML haciendo {{id$ | async}} , pero acceder a él desde la propia clase de componente ha resultado un poco más difícil. Para empezar, el tipo de variable es Observable<number> en lugar de solo number , y eso dificulta su uso en casos en los que debe ser de tipo number , como cuando se compara:
ngOnInit(): void { console.log(this.id$ === 0); }El error de TypeScript que obtengo del código anterior es:
TS2367: esta condición siempre devolverá 'falso' ya que los tipos 'número' y 'Observable' no se superponen.
Y el id$ de registro de consola en sí mismo confirma que es de tipo Observable , por lo que esto me lleva a creer que estoy haciendo algo mal, pero no estoy seguro de qué es exactamente. Cualquier ayuda es apreciada!!!
id$ es un Observable , y puede acceder a su valor suscribiéndose desde la clase de componente mediante la función de subscribe , o desde la plantilla del componente mediante una canalización async .
En clase de componente:
ngOnInit(): void { this.id$.subscribe(id => console.log(id)); }En plantilla de componente:
<span>{{ id$ | async }}</span> Consulte los documentos oficiales de Angular sobre Observable (s):