es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo enviar dos acciones en orden en NgRx

No parezco encontrar una forma con NgRx (no RxJS Style) para despachar 2 acciones en un efecto.

Quiero hacer lo siguiente (EN ESTE ORDEN):

eliminar una película en la base de datos con un efecto,
despachar deleteMovieSuccess
despachar getMovies (¡Necesito volver a cargar todas las películas después!)

Intenté hacerlo de la siguiente manera, pero solo dispara la primera Acción y no puedo ver la otra acción:

En mi registro puedo ver:
[Lista de películas] Eliminar película
[Lista de películas] Obtener películas
[Lista de películas] Obtener películas con éxito

Tengo las siguientes acciones:

export const getMovies = createAction(‘[Lista de películas] Obtener películas’, props<{search: string, page: number, limit: number}>());
export const getMoviesSuccess = createAction(‘[Lista de películas] Obtener películas con éxito’, props<{search: string, page: number, limit: number}>());

export const deleteMovie = createAction(‘[Lista de películas] Eliminar película’, props<{ movieToDelete: Movie, search: string, page: number, limit: number }>());
export const deleteMovieSuccess = createAction(‘[Lista de películas] Eliminar película con éxito’, props<{ movieToDelete: Movie }>());

y el siguiente efecto:

deleteMovie$ = createEffect(() => this.actions$.pipe(
ofType(MovieActions.deleteMovie),
mergeMap(({movieToDelete, search, page, limit}) =>
this.moviesService.deleteMovie(movieToDelete)
.pipe(
map(() => MovieActions.deleteMovieSuccess({movieToDelete: movieToDelete})),
map(() => MovieActions.getMovies({search, page, limit})),
catchError(() => EMPTY)
)
)
)
);

¿Cómo puedo activar AMBAS acciones, deleteMoviesSuccess y getMovies, en este orden?

También he intentado con switchMap y faltMap, pero ninguna de las dos acciones se despacha correctamente. Simplemente no puedo entender cómo es posible despachar de manera iterativa, pero realmente lo necesito para mi caso especial.

¡Cualquier ayuda es muy apreciada!

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Se puede utilizar el operador concatMap para enviar ambas acciones en el orden necesario. El operador concatMap esperará a que el primer observable termine antes de suscribirse al siguiente.

    Por lo tanto, en su efecto, puede usar el operador concatMap en lugar de mergeMap de la siguiente manera:

    deleteMovie$ = createEffect(() => this.actions$.pipe(
      ofType(MovieActions.deleteMovie),
      concatMap(({movieToDelete, search, page, limit}) =>
        this.moviesService.deleteMovie(movieToDelete)
        .pipe(
          map(() => MovieActions.deleteMovieSuccess({movieToDelete: movieToDelete})),
          concatMap(() => MovieActions.getMovies({search, page, limit})),
          catchError(() => EMPTY)
        )
      )
    )
    );
    

    Esto debería asegurarse de que la acción deleteMovieSuccess sea enviada antes que la acción getMovies.

Comments are closed.