Dentro de mi tienda NGXS tengo el siguiente selector asíncrono
@Selector() static async mainState(store: IMyStore): Promise<IMyState> { return this.getActiveState(store); }Si ahora me suscribo a este selector
@Select(MyStore.mainState) state$: Observable<IMyState>;Si me suscribo a esta transmisión, recibo promesas, no objetos IMyState. Entonces tengo que hacer:
this.state$.subscribe(p => { p.then(state => { ... }); });Puedo enviar la promesa a un flujo rxjs pero luego recibo flujos
this.state$.subscribe(s => { s.subscribe(state => { ... }); });Entonces mi pregunta es, ¿hay alguna forma de admitir selectores asíncronos en ngxs?
El @Selector se usa para "cortar una parte específica del estado del contenedor de estado global" (no para llamar a la función async dentro de él, como sé).
Puede lograr lo que está tratando de hacer, como lo siguiente:
@Action para manejar el proceso async .mainState .async , actualice mainState con el valor adecuado.@Selector para devolver el mainState .action creada dentro de su componente.@Select dentro de su componente para obtener el estado mainState de su estado.Su código podría tener el siguiente aspecto:
mystore.state.ts
@Selector() static mainState(state: IMyStore): IMyState { return state.mainState; } @Action(LoadMainState) async loadMainState(ctx: StateContext<IMyStore>) { const _activeState = await this.getActiveState(store); ctx.patchState({ mainState: _activeState }); }ejemplo.componente.ts
@Select(MyStore.mainState) state$: Observable<IMyState>; ngOnInit(): void { this.store.dispatch(new LoadMainState()); }O si aún no desea crear una tienda incómoda, puede aplanar con switchAll(). Si lo hace, evitará suscribirse feo dentro de suscripción.
@Select(MyStore.mainState) stateHigherOrder$: Observable<Observable<IMyState>>; state$!:Observable<IMyState>; ngOnInit(): void { this.state$ = this.stateHigherOrder$.pipe(switchAll()); }Y ahora this.state$ es lo que querías