Multiple stores within single component using NGXS - 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;
})