Multiple stores within single component using NGXS

Question

Using ngxs I have below setup,

user.state.ts

export class UserState { ... }

product.state.ts

export class ProductState { ... }

App.component.ts

import {UserState} from './user.state'
import {ProductState} from './product.state'


export class App{

  /***      
        I am not sure but like ngrx we can't say,
        private userStore:Store<UserState>    <============ can we do it in constructor like it
  ***/


  @Select(UserState.getUsers) Users$: Observable<IUsers[]>;             // This works
  @Select(ProductState.getProducts) Products$: Observable<IProducts[]>; // This works

  constructor(private store : Store) {}  //<==== Can we have Store<UserState> or Store<ProductState>

  ngOnInit(){

     /***
          Below In 1 Case : when I type this.store.select(state => state.
          after .(dot) it doesn't resolve to .Users(Case 1) or .Products(Case 2)

          Question: So how can I use two different states for below cases????????????             
     ***/

   // 1 Case) 

           this.store.select(state => state.Users.Users).subscribe((users: IUsers[]) => {
                this.users = users;
           })

   // 2 Case) 

           this.store.select(state => state.Products.Products).subscribe((products: IProducts[]) => {
                this.products = products;
           })

  }
}

Is there any elegant way to do using NGXS????

Answer 1

I think this might help you

// Keep this as it is

@Select(UserState.getUsers) Users$: Observable<IUsers[]>;             
@Select(ProductState.getProducts) Products$: Observable<IProducts[]>; 

// And then use it like this

this.Users$.subscribe((users: IUsers[]) => {
    this.users = users;
})

this.Products$.subscribe.((products: IProducts[]) => {
    this.products = products;
})