Can someone please help me restructure the following observable stream so if an exception occurs during the getPreferences on the local provider the remote provider getPreferences will still occur?
thanks!
#Effect() load$: Observable<Action> = this._actions$
.ofType<Load>(LOAD)
.pipe(
switchMap(() => {
return this._localProvider.getPreferences()
.pipe(
tap((preferences: Preferences) => {
this._store.dispatch(new LoadSuccess(preferences));
}),
switchMap((preferences: Preferences) => {
return this._remoteProvider.getPreferences()
.pipe(
filter((remotePref: Preferences) => {
return remotePref.timestamp$ > preferences.timestamp$;
}),
map((remotePref: Preferences) => {
return new LoadSuccess(remotePref);
}),
catchError(error => {
return of(new LoadError(error));
})
)
}),
catchError(error => {
return of(new LoadError(error));
})
)
}),
);
Related
What currently works with one action:
#Effect()
addAssignment$ = this.actions$.pipe(
ofType(assignmentActions.AssignmentsActionTypes.AddAssignment),
exhaustMap((action) => {
return this.assignmentDataService.addOrUpdateAssignment([action.payload]).pipe(
map((assignment) => {
return new assignmentActions.AddAssignmentSuccess(assignment);
})
);
}));
How I'm trying to refactor this:
#Effect()
updateAssignment$ = this.actions$.pipe(
ofType(assignmentActions.AssignmentsActionTypes.UpdateAssignment),
map((action) => {
return action.payload;
}),
switchMap((payload) => {
return this.assignmentDataService.addOrUpdateAssignment([payload.postData]);
}),
switchMap((res) => {
return [
new assignmentActions.LastUpdatedAssignmentPost(action.payload.postData),
new assignmentActions.LastUpdatedAssignment(action.payload.mergedData),
new assignmentActions.UpdateAssignmentSuccess(action.payload.mergedData),
];
})
);
How ever ofcourse action.payload.mergedData & action.payload.postData are not available in the last switchMap, and since im quite noob to Effects and Observables I'm breaking my head on this.
Whats the right combination of operators in this one?
To get access to the payload, use the last switchMap in the observable pipeline of this.assignmentDataService.addOrUpdateAssignment API returned observable like this:
#Effect()
updateAssignment$ = this.actions$.pipe(
ofType(assignmentActions.AssignmentsActionTypes.UpdateAssignment),
map((action) => {
return action.payload;
}),
switchMap((payload) => {
return this.assignmentDataService.addOrUpdateAssignment([payload.postData])
.pipe(
switchMap((res) => {
return [
new assignmentActions.LastUpdatedAssignmentPost(payload.postData),
new assignmentActions.LastUpdatedAssignment(payload.mergedData),
new assignmentActions.UpdateAssignmentSuccess(payload.mergedData),
];
})
);
})
);
Hope it helps.
Evantually I solved this just by adding more effects to the equation.
- First effect sends server request... on response sends a UpdateAssignmentSuccess action
- Second effect listens to UpdateAssignmentSuccess and send a LastUpdatedAssignmentPost action
- Third effect listens to LastUpdatedAssignmentPost action and sends a LastUpdatedAssignment action
#Effect()
updateAssignment$ = this.actions$.pipe(
ofType(assignmentActions.AssignmentsActionTypes.UpdateAssignment),
exhaustMap((action) => {
return this.assignmentDataService.addOrUpdateAssignment([action.payload.postData]).pipe(
map((assignment) => {
return new assignmentActions.UpdateAssignmentSuccess(action.payload);
})
);
}),
catchError(() => {
return of({
type: assignmentActions.AssignmentsActionTypes.UpdateAssignmentFailure,
payload: true
});
})
);
#Effect()
updateAssignmentsSuccess$ = this.actions$.pipe(
ofType(assignmentActions.AssignmentsActionTypes.UpdateAssignmentSuccess),
map((action:any) => {
return new assignmentActions.LastUpdatedAssignmentPost(action.payload);
})
);
#Effect()
lastUpdateAssignmentsPost$ = this.actions$.pipe(
ofType(assignmentActions.AssignmentsActionTypes.LastUpdatedAssignmentPost),
map((action:any) => {
return new assignmentActions.LastUpdatedAssignment(action.payload);
})
);
I was using fromEvent but I switched to fromEventPattern so I can console.log to troubleshoot. I see that when I unsubscribe(), only the first fromEventPattern remove method is called. Does anyone know why the remove handlers of the the window.remveEventListener('online') and offline are not getting called?
If I remove the startWith(window.navigator.onLine) from the the .pipe it works, but I need the the startWith(window.navigator.onLine) for at least one of them.
Here is my pipeline:
pipeline$ = combineLatest(
merge(
fromEventPattern(
handler => {
console.log('adding io.socket.disconnect');
io.socket.on('disconnect', handler);
},
handler => {
console.log('removing io.socket.disconnect');
io.socket.off('disconnect', handler);
},
).pipe(
mapTo(false),
tap(() => this.setState({ isConnected: false })),
),
this.isConnectedSubject.pipe(
tap(isConnected => this.setState({ isConnected })),
startWith(io.socket.isConnected())
)
),
merge(
fromEventPattern(
handler => {
console.log('adding window.online');
window.addEventListener('online', handler, false);
},
handler => {
console.log('removing window.online');
window.removeEventListener('online', handler, false);
}
).pipe(
tap(() => console.log('online')),
mapTo(true),
tap(() => this.setState({ isOnline: true })),
startWith(window.navigator.onLine)
),
fromEventPattern(
handler => {
console.log('adding window.offline');
window.addEventListener('offline', handler, false);
},
handler => {
console.log('removing window.offline');
window.removeEventListener('offline', handler, false);
}
).pipe(
tap(() => console.log('offline')),
mapTo(false),
tap(() => this.setState({ isOnline: false })),
startWith(window.navigator.onLine)
)
)
).pipe(
switchMap(([ isConnected, isOnline, ...rest ]) => {
console.log('isConnected:', isConnected, 'isOnline:', isOnline, 'rest:', rest);
console.log(!isConnected && isOnline ? 'RE-CON now' : 'DO NOT re-con');
return !isConnected && isOnline
? defer(() => connectSocket()).pipe(
retryWhen(error$ =>
error$.pipe(
tap(error => console.log('got socket connect error!', error.message)),
delayWhen((_, i) => {
const retryIn = 10000;
this.setState({
retryAt: Date.now() + retryIn
});
return timer(retryIn);
})
)
),
tap(() => isConnectedSubject.next(true))
)
: EMPTY;
}),
takeUntil(mSessionSubject.pipe(
filter(action => action.type === 'LOGOUT'),
))
);
I subscribe to it like this:
const sub = pipeline$.subscribe();
and then I unsubscribe like this:
sub.unsubscribe();
After calling this unsubscribe, I am not seeing the online/offline removal methods trigger.
did you check if the subscription is defined before doing unsubscribe?
something like
if (sub !== undefined) {
sub.unsubscribe();
}
because you might unsubscribe before sub emit any data however It's not recommended to use unsubscribe , but you could use take(n),
takeWhile(predicate), first() or first(predicate) instead.
I am learning to use RXJS. In this scenario, I am chaining a few async requests using rxjs. At the last mergeMap, I'd like to have access to the first mergeMap's params. I have explored the option using Global or withLatest, but neither options seem to be the right fit here.
const arraySrc$ = from(gauges).pipe(
mergeMap(gauge => {
return readCSVFile(gauge.id);
}),
mergeMap((csvStr: any) => readStringToArray(csvStr.data)),
map((array: string[][]) => transposeArray(array)),
mergeMap((array: number[][]) => forkJoin(uploadToDB(array, gauge.id))),
catchError(error => of(`Bad Promise: ${error}`))
);
readCSVFile is an async request which returns an observable to read CSV from a remote server.
readStringToArray is another async request which returns an observable to convert string to Arrays
transposeArray just does the transpose
uploadToDB is async DB request, which needs gague.id from the first mergeMap.
How do I get that? It would be great to take some advice on why the way I am doing it is bad.
For now, I am just passing the ID layer by layer, but it doesn't feel to be correct.
const arraySrc$ = from(gauges).pipe(
mergeMap(gauge => readCSVFile(gauge.id)),
mergeMap(({ data, gaugeId }: any) => readStringToArray(data, gaugeId)),
map(({ data, gaugeId }) => transposeArray(data, gaugeId)),
mergeMap(({ data, gaugeId }) => uploadToDB(data, gaugeId)),
catchError(error => of(`Bad Promise: ${error}`))
);
Why don't you do simply this?
const arraySrc$ = from(gauges).pipe(
mergeMap(gauge => readCSVFile(gauge.id).pipe(
mergeMap((csvStr: any) => readStringToArray(csvStr.data)),
map((array: string[][]) => transposeArray(array)),
mergeMap((array: number[][]) => forkJoin(uploadToDB(array, gauge.id)))
)),
catchError(error => of(`Bad Promise: ${error}`))
);
You can also wrap the inner observable in a function:
uploadCSVFilesFromGaugeID(gaugeID): Observable<void> {
return readCSVFile(gaugeID).pipe(
mergeMap((csvStr: any) => readStringToArray(csvStr.data)),
map((array: string[][]) => transposeArray(array)),
mergeMap((array: number[][]) => forkJoin(uploadToDB(array, gaugeID))
);
}
In order to do this at the end:
const arraySrc$ = from(gauges).pipe(
mergeMap(gauge => uploadCSVFileFromGaugeID(gauge.id)),
catchError(error => of(`Bad Promise: ${error}`))
);
MergeMap requires all observable inputs; else, previous values may be returned.
It is a difficult job to concatenate and display the merging response. But here is a straightforward example I made so you can have a better idea. How do we easily perform sophisticated merging.
async playWithBbservable() {
const observable1 = new Observable((subscriber) => {
subscriber.next(this.test1());
});
const observable2 = new Observable((subscriber) => {
subscriber.next(this.test2());
});
const observable3 = new Observable((subscriber) => {
setTimeout(() => {
subscriber.next(this.test3());
subscriber.complete();
}, 1000);
});
console.log('just before subscribe');
let result = observable1.pipe(
mergeMap((val: any) => {
return observable2.pipe(
mergeMap((val2: any) => {
return observable3.pipe(
map((val3: any) => {
console.log(`${val} ${val2} ${val3}`);
})
);
})
);
})
);
result.subscribe({
next(x) {
console.log('got value ' + x);
},
error(err) {
console.error('something wrong occurred: ' + err);
},
complete() {
console.log('done');
},
});
console.log('just after subscribe');
}
test1() {
return 'ABC';
}
test2() {
return 'PQR';
}
test3() {
return 'ZYX';
}
I have a situation where I want to access action payload in a third level operation.
I was able to such thing in lettable operators but how can I do the same with pipeable operator?
this my code,
#Effect()
onTrySignin = this.actions$.pipe(
ofType(AuthActions.TRY_SIGNIN),
map((action: AuthActions.TrySignin) => {
return action.payload;
}),
switchMap(action => {
return this.httpService
.postRequest('UserAccounts/Login', action.credentials);
}), catchError((error: HttpErrorResponse) => {
return Observable.of(new AuthActions.FailedAuth(error));
}),
mergeMap((response: any) => {
// how to access action payload here?
})
);
You can use map() to pass data along an observable chain like this:
// both foo and bar will be available on next()
from(AsyncFooData()).pipe(
concatMap(foo => AsyncBarData().pipe(
map(bar => ({foo, bar})
)),
tap(val => console.log(val), // chain more operators here...
).subscribe(({foo, bar}) => {
// do stuff with foo and bar
})
FWIW, I took this answer from this question where I posted a somewhat similar answer.
ok, its a pipe inside a pipe
#Effect()
onTrySignin = this.actions$.pipe(
ofType(AuthActions.TRY_SIGNIN),
map((action: AuthActions.TrySignin) => {
return action.payload;
}),
switchMap(actionPayload => {
return this.httpService.postRequest('UserAccounts/Login', actionPayload.credentials).pipe(
mergeMap((response: HttpResponse<IApiResponder<string>>) => {
switch (response.status) {
case 200:
if (actionPayload.returnUrl) {
this.router.navigate([actionPayload.returnUrl]);
} else {
this.router.navigate(['/dbapp']);
}
return Observable.concat(
Observable.of(new AuthActions.GenerateAntiforgeryToken()),
Observable.of(new AuthActions.Signin(this.authService.getUserData())),
);
}
}),
catchError(e => {
return Observable.of(new AuthActions.FailedAuth(e));
}),
);
}),
);
I work in angular 2 Project and use ngrx and rxjs technologies.
Now I have a problem:
I try to declare an Effect.
The effect has http request, and only when it success I want to call other http-request, and so only if it also success - then dispatch an success-action.
I has tested it by throw an error but it always dispatch the action!
See:
#Effect()
createEntity$ = this.actions$.ofType(CREATE_ENTITY)
.switchMap((action: CreateEntity) => {
return this.httpService.getDefaultEntityData(action.payload.type).map((entity) => {
return Observable.throw("testing only");
/*if (entity) {
entity.title = entity.type;
return this.httpService.addEntity(entity);
}*/
})
.catch((error) => Observable.of(new createEntityFailure(error)))
.map(mappedResponse => ({ type: CREATE_ENTITY_SUCCESS, payload: mappedResponse }))
});
How about this:
this.actions$
.ofType(CREATE_ENTITY)
.map((action: CreateEntity) => action.payload)
.switchMap(payload =>
this.httpService.getDefaultEntityData(payload.type)
.mergeMap(entity => this.httpService.addEntity(entity))
// .mergeMap(entity => Observable.throw('error')) // or this for testing
.mergeMap(response => new actions.Action(...))
.catch(error => new actions.Error(...))
);
You can either split this up into multiple actions or just add another API call in the same effect using Observable.forkJoin
#Effect() createEntity$ = this.actions$.ofType(CREATE_ENTITY)
.switchMap((action: CreateEntity) => {
return Observable.forkJoin(
this.httpService.callOne(),
this.httpService.callTwo()
)
.catch((error) => Observable.of(new createEntityFailure(error)))
.map(mappedResponse => ({ type: CREATE_ENTITY_SUCCESS, payload: mappedResponse }))
});
As forkJoin is parallel that won't work for you. You can just switchMap on the first API call and return the second:
#Effect() createEntity$ = this.actions$.ofType(CREATE_ENTITY)
.switchMap((action: CreateEntity) => {
return this.httpService.callOne();
})
.switchMap((response) => {
return this.httpService.callTwo()
.map(secondResponse => ({
type: CREATE_ENTITY_SUCCESS,
payload: {
first: response,
second: secondResponse
}
}))
})
.catch((error) => Observable.of(new createEntityFailure(error)))
});
1) If you returning Observable you probably want swithMap instead of map
2) Action always has been dispatched because you return non error Observable from catch. Changing Observable.of to Observable.throw will throw error further
#Effect()
createEntity$ = this.actions$.ofType(CREATE_ENTITY)
.switchMap((action: CreateEntity) =>
this.httpService.getDefaultEntityData(action.payload.type)
)
.switchMap((entity) => { // <------ switchMap here
return Observable.throw("testing only");
/*if (entity) {
entity.title = entity.type;
return this.httpService.addEntity(entity);
}*/
})
.catch((error) =>
Observable.throw(new createEntityFailure(error)) // <------ throw here
)
.map((mappedResponse) =>
({ type: CREATE_ENTITY_SUCCESS, payload: mappedResponse })
);