Actualmente estoy implementando una función que "abre un cuadro de diálogo" (efecto), después de abrir el cuadro de diálogo, el usuario presiona guardar y luego quiero cerrar el cuadro de diálogo.
Hice un diálogo y un flujo falsos para el ejemplo.
También dividí el flujo en dos efectos: openDialogEffect y saveEffect para evitar el "operador-infierno" y el código más legible y reutilizar el efecto de guardado de otras llamadas.
esto funciona bien hasta que quiera cerrar el cuadro de diálogo DESPUÉS de que el guardado sea exitoso. El problema es cómo "enganchar" en la canalización de saveEffect ?
Reproduzco el problema aquí: stackblitz
readonly openDialogEffect = this.effect(($: Observable<any>) => $.pipe( exhaustMap((dialogRef) => dialogRef.open().pipe( tap({ next: () => { this.saveEffect(); // <----- after that need to close the dialog... but how?? // then: dialogRef.close(); }, }) ) ) ) ); readonly saveEffect = this.effect(($) => $.pipe( exhaustMap(() => this.api.save().pipe( switchMap((res) => this.api.updateFoo(res).pipe( tap({ next: () => { console.log('after save'); this.toast.success(); }, error: () => { console.log('in error'); this.toast.error(); }, }) ) ) ) ) ) );ngrx puede manejar efectos secundarios puros (efectos que no manipulan el estado de la aplicación). Aunque necesita enviar una acción desde dentro de un efecto para lograrlo, de lo contrario no puede estar seguro de si tuvo éxito o no.
@Component({ // component metadata }) export class MyComponent implements OnInit { constructor( private readonly actions$: Actions, ) {} ngOnInit() { this.actions$.pipe( ofType(someAction), takeUntil(this.destroy$), // remember to unsubscribe ).subscribe(({payload}) => { // show toast // close dialog }); } }