Angular/NGXS - can't get store state

Question

On the parent component I'm dispatching an action, I am willing to get the dispatched array on the child, for that I am doing the following:

  export class ListComponent implements OnInit {
  @Select(ProductState.getProductDetails) listProduct$: Observable<Product>;

   constructor() { 
    //Can't get the dispatched array using the following
    const list = this.listProduct$;
    console.log('The array content is ', list);
   }

  }

list$ normally should return an array as I am willing to run a for loop on its elements and filter some data.

So far, I can't see on the logs that the data is getting dispatched correctly from the parent component, but I wasn't able to get/modify it on the child component.

score 0 · Answer 1 · answered Aug 02 '21 at 15:36

As you can see, the selector returns an Observable from RxJS. If you want to get the value, you should subscribe to it (or use the AsynPipe) :

 this.listProduct$.subscribe(products => {
     // Do something with products
 });

Don't forget to unsubscribe or it will lead to weird/unpredictable errors and memory leak.

Angular/NGXS - can't get store state

1 Answers1