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 };
}),