Ejecutar código después de completar el envío mientras se usa ngrx

Hola usuario de nuestro sitio, encontramos la solución a tu pregunta, desplázate y la hallarás a continuación.

Solución:

Respuesta rápida: no puedes.

Como dijiste, dispatch es asíncrono.

Lo que debes hacer es usar @ngrx/effects. Es casi lo mismo que usar addAuthorAction excepto que en lugar de llamar a una función, “captura” las acciones enviadas y hace algo justo después de que los reductores las hayan aplicado.

Entonces lo que hago en general, es que divido mis acciones en 3, por ejemplo:

• FETCH_USER

• FETCH_USER_SUCCESS

• FETCH_USER_ERROR

• FETCH_USER solo se usa para alternar un booleano para que pueda mostrar una rueda mientras busco al usuario

• Capto esta acción de un efecto y hago un solicitud http para buscar al usuario

• Si la respuesta http está bien y tengo la información que busco, despacho desde el efecto FETCH_USER_SUCCESS con la respuesta como carga útil, de lo contrario envío FETCH_USER_ERROR y cambio el valor booleano a false (para que podamos intentar buscarlo de nuevo, por ejemplo).

Así que en tu ejemplo, si quieres console.log algo DESPUÉS de FETCH_USER_SUCCESS, simplemente use otro efecto para capturar FETCH_USER_SUCCESS y haga lo que quiera aquí.

Probado con

"@ngrx/core": "^1.2.0",
"@ngrx/effects": "^7.4.0",
"@ngrx/router-store": "^7.4.0",
"@ngrx/store": "^7.4.0",
"@ngrx/store-devtools": "^7.4.0",

Esto también funcionará:

import  ofType, Actions  from '@ngrx/effects';

// Constructor
constructor(
   private _actions$: Actions,
   private _store: Store,
)  

// YOUR METHOD    
this._store.dispatch();
this._actions$.pipe(ofType()).subscribe((data: any) => 
  console.log(data);  // returned state data        
)

Con ngrx puedes escuchar acciones como esta:

constructor(private actionsSubject$: ActionsSubject, private store: Store) 

ngOnInit() {
  this.actionsSubject$.pipe(
    takeUntil(this.unsubscribe$), // optional
    filter((action) => action.type === SimsActionTypes.SimEditedSuccess)
  ).subscribe((payload) => 
    console.log(payload)
  )

Cuando envíe FIRST_ACTION, use un efecto para realizar la solicitud HTTP. En efecto, cuando tenga la respuesta de vuelta, active una SECOND_ACTION con la respuesta como carga útil. Luego solo escuche SECOND_ACTION en el archivo .ts de su controlador

Comentarios y calificaciones

Finalizando este artículo puedes encontrar las observaciones de otros gestores de proyectos, tú también tienes la opción de mostrar el tuyo si te apetece.

---

---

Utiliza Nuestro Buscador