In the code snippet below, I want to emit a GetData action if the update operation was successful or a BackendError action if unsuccessful.
#Effect()
updateData$ = this.actions$.pipe(
ofType(MyActionType.UPDATE_DATA),
map((action: UpdateData) => action.payload),
combineLatest(this.authService.getUser(), (myData, user) => this.dataService.updateData(myData, user)),
map(() => new GetData()),
catchError((err) => { of(new BackendError(err)))
);
The above code does not seem to be working. Even though the update operation fails due to permission error, the BackendError action is not emitted.
Any help is appreciated.
Your current implementation will swallow errors on the updateData operation, because the action$ (the outer observable) gets mapped to a new GetData() action, regardless of the result of the updateData operation (success or failure).
In the implementation below, the catchError operator will runif the updateData operation (dataUpdate$ -- the inner observable) throws an error..
#Effect()
updateData$ = this.actions$.pipe(
ofType(MyActionType.UPDATE_DATA),
mergeMap((action: UpdateData) => {
const user$ = this.authService.getUser();
const dataUpdate$ = user$.pipe(
mergeMap(user => this.dataService.updateData(action.payload, user));
);
return dataUpdate$.pipe(
map(() => new GetData()),
catchError(err => of(new BackendError(err)))
);
})
);
Additional Resources
Here's some more information on the difference between mergeMap
and map.
Official docs for mergeMap.
Example of #Effect using this approach in the #ngrx/effects README.
Related
I have an effect in NgRX effect, as follows:
$createOrganisation = createEffect(() =>
this.actions$.pipe(
ofType(fromOrganisationActions.createOrganisation),
switchMap((data) => this.organisation.createOrganisation(data)),
map((response) => fromOrganisationActions.createOrganisationSuccess({ orgId: response.id })),
catchError((error) => {
return of(fromOrganisationActions.createOrganisationError(error));
})
)
);
However, my stream never seems to end when the catchError is triggered, i.e. in the instance of this.organisation.createOrganisation returning a 400 error.
The action, fromOrganisationActions.createOrganisationError(error) is triggered and my reducer is triggered from this... but if I re-trigger the fromOrganisationActions.createOrganisation effect, this effect runs but the API call is never made a second time.
If I configure it as follows, and dispatch it manually, it works:
$createOrganisation = createEffect(() =>
this.actions$.pipe(
ofType(fromOrganisationActions.createOrganisation),
switchMap((data) => this.organisation.createOrganisation(data)),
map((response) => fromOrganisationActions.createOrganisationSuccess({ orgId: response.id })),
catchError((error) => {
this.store.dispatch(fromOrganisationActions.createOrganisationError(error));
return throwError(error);
})
)
);
But other examples online suggest the first way should work, but it is not for me, and I do not understand why my stream never ends.
Can somebody please advise and tell me why my stream never ends in the first instance?
The catchError should be added to the inner observable.
$createOrganisation = createEffect(() =>
this.actions$.pipe(
ofType(fromOrganisationActions.createOrganisation),
switchMap((data) => this.organisation.createOrganisation(data).pipe (
map((response) =>
fromOrganisationActions.createOrganisationSuccess({ orgId: response.id })),
catchError((error) => {
return of(fromOrganisationActions.createOrganisationError(error));
})
)),
)
);
These mistakes can be caught with eslint-plugin-ngrx, more details about the rule here.
I am using NGRX and Angular 11.
I am trying to, when an action is executed, call another action, listen to the success of it, and if it succeeded dispatch a final action:
Here my code a bit simplified :
#Effect()
getUserSettingSuccess$ = this.actions$.pipe(
// When this action `GetUserSettingsSuccess` is executed
ofType<featureActions.GetUserSettingsSuccess>(featureActions.ActionTypes.GetUserSettingsSuccess),
concatMap((action) =>
of(action).pipe(withLatestFrom(this.store$.pipe(select(ProjectsStoreSelectors.selectedProjectId))))
),
// I want to dispatch a new action
tap(([action, projectId]) => new ModelsStoreAction.GetAllModelsRequest({ projectId })),
// and listen to the success / failure of that action.
// If success dispatch `SetModelSelection` else do nothing.
map(([action]) =>
this.actions$.pipe(
ofType(ModelsStoreAction.ActionTypes.GetAllModelsSuccess),
takeUntil(this.actions$.pipe(ofType(ModelsStoreAction.ActionTypes.GetAllCesiumModelsFailed))),
first(),
map(() => new ModelsStoreAction.SetModelSelection())
)
)
The problem I have is that, the above code do not dispatch a valid action. But I am getting a bit lost with all those rxjs operator.
Here would be my approach:
#Effect()
getUserSettingSuccess$ = this.actions$.pipe(
// When this action `GetUserSettingsSuccess` is executed
ofType<featureActions.GetUserSettingsSuccess>(featureActions.ActionTypes.GetUserSettingsSuccess),
concatMap((action) =>
of(action).pipe(withLatestFrom(this.store$.pipe(select(ProjectsStoreSelectors.selectedProjectId))))
),
// I want to dispatch a new action
tap(([action, projectId]) => new ModelsStoreAction.GetAllModelsRequest({ projectId })),
// and listen to the success / failure of that action.
// If success dispatch `SetModelSelection` else do nothing.
switchMap(
([action]) => this.actions$.pipe(
// adding all the possibilities here
ofType(ModelsStoreAction.ActionTypes.GetAllModelsSuccess, ModelsStoreAction.ActionTypes.GetAllCesiumModelsFailed),
first(),
filter(a => a.type === ModelsStoreAction.ActionTypes.GetAllModelsSuccess.type),
map(() => new ModelsStoreAction.SetModelSelection()),
)
)
)
It didn't work before because this.actions$ is essentially a type of Subject and an effect is not expected to return an Observable-like value. In order to solve that, I used switchMap, which will handle the inner subscription automatically.
I have the following stream:
const source = fromEvent(document.querySelector('h1'), 'click').pipe(
switchMap(() => {
return timer(500).pipe(
switchMap(() => timer(500).pipe(tap(() => {
throw new Error('error')
})))
)
})
)
When the inner stream throws, the fromEvent source is also stopped. How can I prevent this and keep the source stream alive?
I think you could try the following:
const source = fromEvent(document.querySelector('h1'), 'click').pipe(
switchMap(() => {
return timer(500).pipe(
switchMap(() => timer(500).pipe(tap(() => {
throw new Error('error')
}))),
catchError(() => EMPTY)
)
})
)
where EMPTY is nothing but this:
export const EMPTY = new Observable<never>(subscriber => subscriber.complete());
The reason this is happens is that when an error occurs, even in a next callback(e.g tap's first argument), it will be passed through as:
this.destination.error(caughtError);
where destination is the next subscriber in the chain(downwards). Eventually catchError will be reached and this prevents the error from affecting the outermost stream(whose source is fromEvent).
You can try with retry operator after the first switchMap, like this
const source = fromEvent(document.querySelector('h1'), 'click').pipe(
switchMap(() => {
return timer(500).pipe(
switchMap(() => timer(500).pipe(tap(() => {
throw new Error('error')
})))
)
}),
retry()
)
If no parameter is passed to retry, then it will resubscribe to the source observable an infinite amount of times. Otherwise you can pass an integer which represents the number of times it will retry before eventually error.
Here a stackblitz.
I have the following searchService.search method that returns a forkJoin of two api calls.
I want the calls to execute simultaneously which they are but I also want each response back as a single object that can be passed into my SearchSuccess action and processed immediately without waiting for all calls to complete. Currently they are returning as an array of responses and only upon completion of both API calls - as this is what forkJoin is used for.
My issue is that I'm struggling to find another operator that does what I want.
Or perhaps the code pattern requires some redesign?
action:
#Effect()
trySearch: Observable<Action> = this.actions$.pipe(
ofType(SearchActionTypes.TrySearch),
switchMap((action: TrySearch) =>
this.searchService.search(action.payload)
.pipe(
map((data) => new SearchSuccess(data)),
catchError(error => of(new SearchFail(error))),
),
),
);
SearchService (snippet):
search(searchForm: SearchForm): Observable<any> {
const returnArray = [];
if (searchForm.searchClients) {
const searchClientParams = new Search();
searchClientParams.searchPhrase = searchForm.searchPhrase;
searchClientParams.type = SearchType.Client;
const searchClients = this.objectSearch(searchClientParams);
returnArray.push(searchClients);
}
if (searchForm.searchContacts) {
const searchContactParams = new Search();
searchContactParams.searchPhrase = searchForm.searchPhrase;
searchContactParams.type = SearchType.Contact;
const searchContacts = this.objectSearch(searchContactParams);
returnArray.push(searchContacts);
}
return Observable.forkJoin(returnArray);
}
If I understand it correctly returnArray contains two Observables and you want to wait until they both complete but still you want to emit each result separately.
Since forkJoin emits all results in a array you could just unwrap it with mergeMap (or concatMap):
this.searchService.search(action.payload)
.pipe(
mergeMap(results => results),
map((data) => new SearchSuccess(data)),
catchError(error => of(new SearchFail(error))),
),
Might be that I'm a noob and not fully understanding how this stuff should work yet, but I have an epic in redux-observable in which I want to use as a way to create a promise which will dispatch an action and wait for a different action before resolving. I've got it working by mapping the action to '__IGNORE__' but I really don't want to do that. Is there any way to just have an epic handle an action, but not pass anything else on?
Here's my code:
export const waitFor = (type, action) => new Promise((resolve, reject) => {
const waitForResult = action$ => action$.ofType(type).do(() => resolve()).mapTo({type: "___IGNORE___"});
registerEpic(waitForResult);
action();
});
You can throw away any next'd values from an observable chain by using the .ignoreElements() RxJS operator
action$.ofType(type)
.do(() => resolve())
.ignoreElements();
Another way of doing this (no more right or wrong) is to create an anonymous Observable that just subscribes.
const waitForResultEpic = action$ => new Observable(observer =>
action$.ofType(type)
.subscribe(() => resolve())
);
This is implicitly returning the subscription we create, so that it's attached to the lifecycle of our rootEpic as well. Because we never call observer.next(), this epic never emits any values; just like ignoreElements().
Although you didn't ask, you may eventually notice that your epic will run forever, listening for that incoming action matching the type variable. This may not be not what you want, if you want to match once then complete.
You can accomplish that using .take(1) operator.
const waitForResult = action$ =>
action$.ofType(type)
.take(1)
.do(() => resolve())
.ignoreElements();
Or
const waitForResult = action$ => new Observable(observer =>
action$.ofType(type)
.take(1)
.subscribe({
next: () => resolve(),
error: err => observer.error(err),
complete: () => observer.complete()
})
);
This will only match once per the life of the application--once received it will never do it again.