0

Estoy intentando hacer un efecto que llame a dos acciones en Angular utilizando ngrx

El comportamiento que busco es que cuando se hayan cargado los datos de un estudiante se obtengan sus matrículas y su avatar, es decir, desencadenar dos acciones.

Básicamente lo que tengo es ésto

@Effect()
  LoadStudentSuccess: Observable<StudentAction> = this.actions.pipe(
    ofType(StudentActionTypes.LOAD_STUDENT_SUCCESS),
    withLatestFrom(
      this.store.select(getStudentState)),
      map(data => {
        const action: LoadStudentSuccess = data[0];
        const studentState: StudentState = data[1];
        //return new LoadAvatar({ avatarURL: studentState.currentStudent.avatar});
        return new LoadAllTuitions({ alumnoId: action.payload.alumnoId, idFicha:action.payload.idFicha });
      }),
  );

El comentario que hay es para pruebas. He comprobado que la aplicación hace cualquiera de las dos correctamente si la descomento y comento la otra, pero necesitaría que llamara de alguna manera a las dos.

He probado a quitarle el return a la primera, pero no hace nada.

Imagino que debe de existir alguna forma de concatenar dos llamadas en un Effect.

¿Me podéis dar alguna idea de la que tirar del hilo?

Muchas gracias

2 respuestas 2

1

se suscribe inmediatamente al withLatestFrom si la acción ya se ha enviado o no.

<!-- begin snippet: js hide: false console: true babel: false -->

la forma correcta seria 

actions.pipe(
  ofType('SOME_ACTION'),
  someMap(action =>
    of(action).pipe(
      withLatestFrom(store.select(someThing)),
      someMap(([action, latest]) => doSomething(action, latest))
    )
)

//o sea 
@Effect()
  LoadStudentSuccess: Observable<StudentAction> = this.actions.pipe(
    ofType(StudentActionTypes.LOAD_STUDENT_SUCCESS),
switchMap(action =>
of(action).pipe(
    withLatestFrom(
      this.store.select(getStudentState)),
),
      map(data => {
        const action: LoadStudentSuccess = data[0];
        const studentState: StudentState = data[1];
        //return new LoadAvatar({ avatarURL: studentState.currentStudent.avatar});
        return new LoadAllTuitions({ alumnoId: action.payload.alumnoId, idFicha:action.payload.idFicha });
      }),
)
  );

https://stackoverflow.com/questions/60282687/how-to-use-withlatestfrom-with-a-selector-in-ngrx

1
  • Código sin explicación no es útil para nadie. Tal vez para el OP, pero no para el resto.
    – Candid Moe
    el 3 oct. 2021 a las 6:28
0

Creo que he dado con la solución, aunque no sé si es lo más correcto.

Como es una acción asíncrona era tan sencillo como lanzar la acción con el dispatch del store.

 @Effect()
  LoadStudentSuccess: Observable<StudentAction> = this.actions.pipe(
    ofType(StudentActionTypes.LOAD_STUDENT_SUCCESS),
    withLatestFrom(
      this.store.select(getStudentState)),
      map(data => {
        const action: LoadStudentSuccess = data[0];
        const studentState: StudentState = data[1];
        this.store.dispatch(new LoadAvatar({ avatarURL: studentState.currentStudent.avatar}));
        return new LoadAllTuitions({ alumnoId: action.payload.alumnoId, idFicha:action.payload.idFicha });
      }),
  );

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.