I am still learning about the ngrx store and redux pattern. I've encountered an issue with dispatching the updatePresentation$ effect. This effect is triggered when the updatePresentation action is invoked. Here's how the updatePresentation action is defined:
export const updatePresentation = createAction(
'[Presentation] Update presentation',
props<{ presentation: Presentation, files: FileList | null }>()
);
The updatePresentations$ effect is set up like this:
updatePresentations$ = createEffect(() => {
return this.actions$
.pipe(
ofType(PresentationActions.updatePresentation),
switchMap(action =>
this.presentationService.updatePresentation(action.presentation)
.pipe(
tap(presentation => {
if (action.files !== null && action.files.length > 0) {
this.store.dispatch(PresentationActions.fileUpload({presentationId: presentation.id, files: action.files}));
}
}),
map(presentation => PresentationActions.loadPresentations({pageable: new Pageable()})),
catchError(error => of(PresentationActions.updatePresentationFailure({error})))
)
)
);
});
In essence, my goal is to update the presentation first. Once the presentation is updated, I want to check if there are any files attached and, if so, trigger the fileUpload action. Following that, I intend to reload the presentations by initiating the loadPresentations action (which invokes the loadPresentations$ effect). The fileUpload$ and loadPresentations$ effects are structured as below:
loadPresentations$ = createEffect(() => {
return this.actions$.pipe(
ofType(PresentationActions.loadPresentations),
concatMap(action => this.presentationService.getPresentations(action.pageable)
.pipe(
map(presentations => {
this.store.dispatch(setLoadingSpinner({status: false}));
return PresentationActions.loadPresentationsSuccess({page: presentations});
}),
catchError(error => of(PresentationActions.loadPresentationsFailure({error})))
)
)
);
});
uploadFile$ = createEffect(() => {
return this.actions$
.pipe(
ofType(PresentationActions.fileUpload),
concatMap(action =>
this.fileService.uploadFile(action.presentationId, action.files)
.pipe(
map(bool => PresentationActions.loadPresentations({pageable: new Pageable()})),
catchError(error => of(PresentationActions.fileUploadFailure))
)
)
);
});
In the updatePresentations$ effect, you'll notice that I'm attempting to return the loadPresentations action, which should trigger the loadPresentations$ effect. However, this seems to be ineffective, possibly because I need to return an action that will be resolved by the reducer. How can I correct this for it to function correctly?