I have successfully integrated the store into my angular project. I am able to handle and process the successSelector, but I am facing difficulty in capturing any data with the errorSelector when an HTTP error occurs from the backend.
The error is being caught in effects.ts as shown below:
private postupload() {
return this.actions$.pipe(
ofType(uploadActionTypes.uploadRequestAction),
map(action => action.fileUpload),
switchMap((fileUpload: any) => this.uploadService.postUploadfile(fileUpload)),
map((data: any) => uploadActionTypes.uploadSuccessAction({ data })),
catchError((error: any) => of(uploadActionTypes.uploadFailureAction({ error }))
)
);
}
The errorSelector is defined as follows in selector.ts:
export const uploadErrorSelector = createSelector(
uploadStateSelector,
(state: IuploadState) => state.uploadFileResponse.Errors
);
In Service.ts:
public postUploadfile(fileinfo: any): Observable<any> {
let savefileUploadUrl = `${this.apiBaseURL + UploadApiEndPointUrl.fileUploadUrl}`;
return this.http.post<any>(savefileUploadUrl, fileinfo).pipe(
map((response: Response) => response),
catchError(this.errorHandler)
)
}
errorHandler(error: HttpErrorResponse) {
return Observable.throw(error);
}
}
In component.ts, the service dispatching is called,
postUploadFileSubscription() {
this.postUploadFileSubscription$ = this.store.select(UploadSelector.uploadSelector).subscribe(
response =>{
console.log("response:", response);
if(response.hasOwnProperty('Data')){
if (typeof (response.Data) !== 'undefined' ) {
// Business actions
}
else {
}
}
}, error => {
this.errorMsg = error.error.Message;
},
() => {
console.log('POST upload - now completed.');
})
}
When the server responds with a status code of 200, the response is captured. However, when there is an error response, it is not captured.
Please provide suggestions on how to capture and handle HTTP error responses for UI processing.