1

Tengo el siguiente componente que se encarga de registrar un paciente. Utiliza el decorador Output para informar al componente padre cuando se creó el paciente, y este se encarga de realizar unas modificaciones en la vista. Ahora bien, lo que yo quiero es no utilizar el servicio que crea pacientes, sino mas bien hacer un dispatch de la accion ( this.store.dispatch(createPatient({ patient })) ), y que un effect se encarge de realizar el POST en la api. Eso lo sé hacer, lo que no sé es si existe una forma concreta de notificar al componente de que la acción se ejecutó correctamente.

export class PatientFormComponent {

  ...

  @Output() created = new EventEmitter();

  public onSumbmitPatientDetails(value: any) {
    if (this.patientDetails.valid) {
      const patient: Patient = { ...value };

      let apiUrl = 'patient';
      
      this.repository.create(apiUrl, patient).subscribe((res) => {
        this.created.emit();
        
        this.formRef!.resetForm();
      });
    }
  }
}

2 respuestas 2

1

Una cosa que puedes hacer es crear un efecto local en el componente que escuche por la acción satisfactoria que devuelvas desde el efecto de la llamada a la API.

Sería algo así:

export class PatientFormComponent implements OnDestroy {
  ...

  private localEffectSub: Subscription;

  constructor(private store:Store, private actions$:Actions) {
   this.localEffectSub = actions$.pipe(
     ofType(createPatientSuccess), // filtrar por accion success
     tap(() => this.formRef!.resetForm()) // ejecutar el(los) efecto(s) secundario(s)
   ).subscribe(); // iniciamos ejecución del efecto.
  }

  ngOnDestroy(): void {
   this.localEffectSub.unsubscribe(); //cancelar subscripcion a efecto local al destruir componente
  }

  public onSumbmitPatientDetails(value: any) {
    if (this.patientDetails.valid) {
      this.store.dispatch(createPatient({ patient }));
    }
  }
}

un saludo

1
  • Gracias por tu respuesta. Publiqué mi respuesta con lo que considero es la solución. Agradecería que le eches un vistazo y me dieras tu punto de vista. Saludos. Commented el 30 ago. 2022 a las 21:12
1

la manera mas práctica es directamente inyectar las Actions al componente, y escuchar por la action que despacha el effect una vez que se creó el elemento, como @akotech sugiere. Pero esa solución no es la aconsejada ya que estaría rompiendo con la dinámica del patrón redux, pues el componente debe apoyarse de los cambios de state de la store, y no directamente de las actions, pues para eso están a los reducers y effects.

Así que inspirado en esta solución, lo que hice fue definir un campo más en el State de la entidad en cuestión que actúa como flag.

export interface PatientState extends EntityState<Patient> {
    patientCreated: boolean;
}

En el componente hijo (encargado del form) tengo:

this.store.dispatch(patientActionTypes.createPatient({ patient }));

un effect recibe esa acción, y retorna un observable que se encarga de enviarle el paciente al servicio encargado de comunicarse a la api y luego emitir la acción de que el paciente se creó correctamente. (Nota: Ngrx se encarga de subscribirse/unsubscribirse a dicho observable):

createPatient$ = createEffect(() =>
    this.actions$.pipe(
      ofType(patientActionTypes.createPatient),
      switchMap(({ patient }) =>
        this.apiService
          .post(APIURL, patient)
          .pipe(
            map((patient) => patientActionTypes.patientCreated({ patient }))
      )
    )
  )
);

un reducer recibe esa acción:

on(patientActionTypes.patientCreated, (state, { patient }) => {
    return adapter.addOne(patient, {
      ...state,
      patientCreated: true,
    });
  }),

que se encarga de agregar el paciente al store, y también de poner el flag en true (inicialmente en false) Después tengo un selector que selecciona del store el slice patientCreated:

export const patientJustCreated = selector(
  (state: PatientState) => state.patientCreated
);

entonces ahora tengo a los dos componentes (padre e hijo) que no necesitan comunicarse entre si. Simplemente se subscriben al selector y cada uno realiza lo que tiene que hacer cuando el selector emita aca por ejemplo el componente hijo:

ngOnInit() {
    this.store
      .select(patientJustCreated)
      .pipe(filter((f) => f)) // solo nos importa cuando el flag esta en true
      .subscribe(() => {
        this.store.dispatch(patientActionTypes.resetPatientCreatedFlag()); //importante!!
        // acciones a realizar por el componente hijo ...
      });
}

algo importante, uno de los 2 componentes tiene que resetear el flag y volverlo a false, y asi la proxima vez que se cree un nuevo elemento Patient, se detecte el cambio en el store de false a true del slice en cuestión. Si no se resetea, el flag siempre se escribe en true, y el selector del flag no avisará a los componentes suscritos ya que no hubo cambio de valor. aca el reducer que resetea el flag:

on(patientActionTypes.resetPatientCreatedFlag, (state) => {
    return { ...state, patientCreated: false };
}),
3
  • ¡No olvides aceptar tu respuesta! +1 por la respuesta completa.
    – padaleiana
    Commented el 31 ago. 2022 a las 11:12
  • 1
    En este caso, y si no te he entendido mal, solo estás interesado en la propia acción patientCreated para ejecutar un proceso paralelo, que en este caso, es el form.reset(). Esto es prácticamente la definición exacta de lo que es un efecto. // Dicho esto, crear una propiedad artificial en el estado global, dos acciones extra para manejarla, más un efecto encubierto con el select+dispatch, personalmente me parece añadir una complejidad extra innecesaria. Pero al final la decisión es tuya. Un saludo.
    – akotech
    Commented el 31 ago. 2022 a las 11:40
  • Gracias por tomarte el tiempo de revisión. Estuve evaluando todo, y por ahora esta vez iré por el uso del selector. Aun así entiendo que no hay que ser un evangelista de los patrones. Como me encuentro en esta etapa de aprendizaje, todo esto me sirvió para hacer un repaso exhaustivo de los mecanismos. Asi que por esta vez voy por el camino convencional, pero agrego una nota en mi código de tu manera de implementar la solución. Y así saber que existen otras formas de resolverlo. Saludos. Commented el 31 ago. 2022 a las 17:15

Tu Respuesta

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

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