I'm trying to set up an RxJs recipe to perform some steps and do operations conditionally based on the result of some subscriptions.
The pseudo-code is:
if (trySocialSign() succeeds) {
if (tryGetUserFromDatabase() succeeds) {
do.some.stuff
return
} else {
do.other.stuff
}
}
Right now I have this ugly function that works but I'm wondering if there's a prettier way using pipes and maps and other rxjs operators to be able to achieve the same effect in a more idiomatic way with less nesting. Can someone please help me?
this.auth.getCurrentUserAsync().subscribe(
(u: EasyAuthUser) => {
this.currentUser = u;
this.users.getUser().subscribe(
(user: User) => {
this.onExistingUserSignIn.emit(user);
},
(err: HttpErrorResponse) => {
if (redirected) {
this.onSignIn.emit(u);
}
}
);
},
(err: HttpErrorResponse) => {this.handleHttpError(err)}
)
You could do it like the following code (I didn't test it for obvious reasons). All side-effects are performed only from let. There's also one catchError that will suppress the inner error.
this.auth.getCurrentUserAsync().pipe(
let((u: EasyAuthUser) => this.currentUser = u),
mergeMap((u: EasyAuthUser) => this.users.getUser().pipe(
let(
(user: User) => this.onExistingUserSignIn.emit(user),
(err: HttpErrorResponse) => {
if (redirected) {
this.onSignIn.emit(u);
}
}
),
catchError(e => empty()), // Maybe you don't even want this `catchError`
))
).subscribe(
user => ...,
(err: HttpErrorResponse) => this.handleHttpError(err),
);
Related
How am I supposed to get rid of these nested subscriptions? I thought to do that using concatMap or mergeMap - if you agree, how to I handle the takeUntil for inner subscriptions being different than the outer one? I am quite new to operators and RxJs.
this.myService.selectedCustomerId
.pipe(
takeUntil(this.unsubscribe),
).subscribe((customerId: number) => {
// Do some stuff...
this.anotherService.hasPermission("ROLE1", customerId).pipe(
takeUntil(this.cancel),
).subscribe(hasPermission => this.hasPermissionForRole1 = hasPermission);
this.anotherService.hasPermission("ROLE2", customerId).pipe(
takeUntil(this.cancel),
).subscribe(hasPermission => this.hasPermissionForRole2 = hasPermission);
this.anotherService.hasPermission("ROLE3", customerId).pipe(
takeUntil(this.cancel),
).subscribe(hasPermission => this.hasPermissionForRole3 = hasPermission);
}
);
you can achieve it this way:
this.myService.selectedCustomerId
.pipe(
takeUntil(this.unsubscribe),
mergeMap(customerId: number) => {
const roles = ["ROLE1", "ROLE2", "ROLE3"];
return forkJoin(
roles.map(role => this.anotherService.hasPermission(role, customerId))
)
}
).subscribe(([role1, role2, role3]) => {
// Do some stuff...
}
This is more a logical problem then a RxJS problem, I guess, but I do not get it how to solve it.
[input 1]
From a cities stream, I will receive 1 or 2 objects (cities1 or cities2 are test fixtures).
1 object if their is only one language available, 2 objects for a city with both languages.
[input 2]
I do also have a selectedLanguage ("fr" or "nl")
[algo]
If the language of the object corresponds the selectedLanguage, I will pluck the city. This works for my RxJS when I receive 2 objects (cities2)
But since I also can receive 1 object, the filter is not the right thing to do
[question]
Should I check the cities stream FIRST if only one object exists and add another object. Or what are better RxJS/logical options?
const cities1 = [
{city: "LEUVEN", language: "nl"}
];
const cities2 = [
{city: "BRUSSEL", language: "nl"},
{city: "BRUXELLES", language: "fr"}
];
const selectedLang = "fr"
const source$ = from(cities1);
const result = source$.pipe(
mergeMap((city) => {
return of(selectedLang).pipe(
map(lang => {
return {
lang: city.language,
city: city.city,
selectedLang: lang
}
}),
filter(a => a.lang === selectedLang),
pluck('city')
)
}
)
);
result.subscribe(console.log)
If selectedLang is not an observable (i.e. you don't want this to change) then I think it would make it way easier if you keep it as a value:
const result = source$.pipe(
filter(city => city.language === selectedLang)
map(city => city.city)
);
There's nothing wrong from using external parameters, and it makes the stream easier to read.
Now, if selectedLang is an observable, and you want result to always give the city with that selectedLang, then you probably need to combine both streams, while keeping all the cities received so far:
const selectedLang$ = of(selectedLang); // This is actually a stream that can change value
const cities$ = source$.pipe(
scan((acc, city) => [...acc, city], [])
);
const result = combineLatest([selectedLang$, cities$]).pipe(
map(([selectedLang, cities]) => cities.find(city => city.language == selectedLang)),
filter(found => Boolean(found))
map(city => city.city)
)
Edit: note that this result will emit every time cities$ or selectedLang$ changes and one of the cities matches. If you don't want repeats, you can use the distinctUntilChanged() operator - Probably this could be optimised using an exhaustMap or something, but it makes it harder to read IMO.
Thanks for your repsonse. It's great value for me. Indeed I will forget about the selectedLang$ and pass it like a regular string. Problem 1 solved
I'll explain a bit more in detail my question. My observable$ cities$ in fact is a GET and will always return 1 or 2 two rows.
leuven:
[ { city: 'LEUVEN', language: 'nl', selectedLanguage: 'fr' } ]
brussel:
[
{ city: 'BRUSSEL', language: 'nl', selectedLanguage: 'fr' },
{ city: 'BRUXELLES', language: 'fr', selectedLanguage: 'fr' }
]
In case it returns two rows I will be able to filter out the right value
filter(city => city.language === selectedLang) => BRUXELLES when selectedLangue is "fr"
But in case I only receive one row, I should always return this city.
What is the best solution to this without using if statements? I've been trying to work with object destruct and scaning the array but the result is always one record.
// HTTP get
const leuven: City[] = [ {city: "LEUVEN", language: "nl"} ];
// same HTTP get
const brussel: City[] = [ {city: "BRUSSEL", language: "nl"},
{city: "BRUXELLES", language: "fr"}
];
mapp(of(brussel), "fr").subscribe(console.log);
function mapp(cities$: Observable<City[]>, selectedLanguage: string): Observable<any> {
return cities$.pipe(
map(cities => {
return cities.map(city => { return {...city, "selectedLanguage": selectedLanguage }}
)
}),
// scan((acc, value) => [...acc, { ...value, selectedLanguage} ])
)
}
How do I access the resultB in the tap operator after it was switchMapped ?
streamA$.pipe(
switchMap(resultA => {
const streamB$ = resultA ? streamB1$ : streamB2$;
return streamB$.pipe( // <- nesting
switchMap(resultB => loadData(resultB)),
tap(data => {
// how do I access resultB here?
})
);
})
);
bonus question:
Is it possible to avoid the nesting here, and chain the whole flow under single pipe?
Please consider the following example:
streamA$.pipe(
switchMap(resultA => resultA ? streamB1$ : streamB2$),
switchMap(resultB => loadData(resultB).pipe(map(x => [resultB, x]))),
tap([resultB, data] => {})
);
This is how you can write your observable to get access of resultB and flat the observable operators chain -
streamA$.pipe(
switchMap(resultA => iif(() => resultA ? streamB1$ : streamB2$),
switchMap(resultB => forkJoin([loadData(resultB), of(resultB)])),
tap(([loadDataResponse, resultB]) => {
//loadDataResponse - This will have response of observable returned by loadData(resultB) method
//resultB - This is resultB
})
);
The basic problem here is that switchMap is being used to transform values to emit a certain shape into the stream. If your resultB value isn't part of that shape, then operators further down the chain won't have access to it, because they only receive the emitted shape.
So, there are basically 2 options:
pass an intermediate shape, that contains your value
use a nested pipe to bring both pieces of data into the same operator scope
The solutions suggested so far involve mapping to an intermediate object. My preference is to use the nested pipe, so the data flowing through the stream is a meaningful shape. But, it really comes down to preference.
Using the nested pipe, your code would look something like this:
streamA$.pipe(
switchMap(resultA => {
const streamB$ = resultA ? streamB1$ : streamB2$;
return streamB$.pipe(
switchMap(resultB => loadData(resultB).pipe(
tap(data => {
// you can access resultB here
})
))
);
})
);
Note: you can use iif to conditionally choose a source stream:
streamA$.pipe(
switchMap(resultA => iif(()=>resultA, streamB1$, streamB2$).pipe(
switchMap(resultB => loadData(resultB).pipe(
tap(data => {
// you can access resultB here
})
))
))
);
It can be helpful to break out some of the logic into separate functions:
streamA$.pipe(
switchMap(resultA => doSomeWork(resultA)),
miscOperator1(...),
miscOperator2(...)
);
doSomeWork(result) {
return iif(()=>result, streamB1$, streamB2$).pipe(
switchMap(resultB => loadData(resultB).pipe(
tap(data => {
// you can access resultB here
})
))
))
}
I have a long chain of operations within a pipe. Sub-parts of this chain represent some sort of high level operation. So, for instance, the code could look something like
firstObservable().pipe(
// FIRST high level operation
map(param_1_1 => doStuff_1_1(param_1_1)),
concatMap(param_1_2 => doStuff_1_2(param_1_2)),
concatMap(param_1_3 => doStuff_1_3(param_1_3)),
// SECOND high level operation
map(param_2_1 => doStuff_2_1(param_2_1)),
concatMap(param_2_2 => doStuff_2_2(param_2_2)),
concatMap(param_2_3 => doStuff_2_3(param_2_3)),
)
To improve readability of the code, I can refactor the example above as follows
firstObservable().pipe(
performFirstOperation(),
performSecondOperation(),
}
performFirstOperation() {
return pipe(
map(param_1_1 => doStuff_1_1(param_1_1)),
concatMap(param_1_2 => doStuff_1_2(param_1_2)),
concatMap(param_1_3 => doStuff_1_3(param_1_3)),
)
}
performSecondOperation() {
return pipe(
map(param_2_1 => doStuff_2_1(param_2_1)),
concatMap(param_2_2 => doStuff_2_2(param_2_2)),
concatMap(param_2_3 => doStuff_2_3(param_2_3)),
)
}
Now, the whole thing works and I personally find the code in the second version more readable. What I loose though is the information that performFirstOperation() returns a parameter, param_2_1, which is then used by performSecondOperation().
Is there any different strategy to break a long pipe chain without actually loosing the information of the parameters passed from sub-pipe to sub-pipe?
setting aside the improper usage of forkJoin here, if you want to preserve that data, you should set things up a little differently:
firstObservable().pipe(
map(param_1_1 => doStuff_1_1(param_1_1)),
swtichMap(param_1_2 => doStuff_1_2(param_1_2)),
// forkJoin(param_1_3 => doStuff_1_3(param_1_3)), this isn't an operator
concatMap(param_2_1 => {
const param_2_2 = doStuff_2_1(param_2_1); // run this sync operation inside
return doStuff_2_2(param_2_2).pipe(
concatMap(param_2_3 => doStuff_2_3(param_2_3)),
map(param_2_4 => ([param_2_1, param_2_4])) // add inner map to gather data
);
})
)
this way you've built your second pipeline inside of your higher order operator, so that you can preserve the data from the first set of operations, and gather it with an inner map once the second set of operations has concluded.
for readability concerns, you could do something like what you had:
firstObservable().pipe(
performFirstOperation(),
performSecondOperation(),
}
performFirstOperation() {
return pipe(
map(param_1_1 => doStuff_1_1(param_1_1)),
swtichMap(param_1_2 => doStuff_1_2(param_1_2)),
// forkJoin(param_1_3 => doStuff_1_3(param_1_3)), this isn't an operator
)
}
performSecondOperation() {
return pipe(
concatMap(param_2_1 => {
const param_2_2 = doStuff_2_1(param_2_1);
return doStuff_2_2(param_2_2).pipe(
concatMap(param_2_3 => doStuff_2_3(param_2_3)),
map(param_2_4 => ([param_2_1, param_2_4]))
);
})
)
}
an alternative solution would involve multiple subscribers:
const pipe1$ = firstObservable().pipe(
performFirstOperation(),
share() // don't repeat this part for all subscribers
);
const pipe2$ = pipe1$.pipe(performSecondOperation());
then you could subscribe to each pipeline independently.
I broke one complex operation into two like this:
Main Code
dataForUser$ = this.userSelectedAction$
.pipe(
// Handle the case of no selection
filter(userName => Boolean(userName)),
// Get the user given the user name
switchMap(userName =>
this.performFirstOperation(userName)
.pipe(
switchMap(user => this.performSecondOperation(user))
))
);
First Operation
// Maps the data to the desired format
performFirstOperation(userName: string): Observable<User> {
return this.http.get<User[]>(`${this.userUrl}?username=${userName}`)
.pipe(
// The query returns an array of users, we only want the first one
map(users => users[0])
);
}
Second Operation
// Merges with the other two streams
performSecondOperation(user: User) {
return forkJoin([
this.http.get<ToDo[]>(`${this.todoUrl}?userId=${user.id}`),
this.http.get<Post[]>(`${this.postUrl}?userId=${user.id}`)
])
.pipe(
// Map the data into the desired format for display
map(([todos, posts]) => ({
name: user.name,
todos: todos,
posts: posts
}) as UserData)
);
}
Notice that I used another operator (switchMap in this case), to pass the value from one operator method to another.
I have a blitz here: https://stackblitz.com/edit/angular-rxjs-passdata-deborahk
What problems could arise when using variables that are external to an observable sequence inside the sequence?
For example:
updateCar(newCar: any): Observable<any> {
return of(...).pipe(
switchMap(
(value: any) => {
if (newCar.has4Wheels && value.lovePizza) {
// return a 4 wheel observable
} else {
// return a not 4 wheel observable
}
}
),
switchMap(
(value: any) => {
if (newCar.has4Windows && !value.lovePizza) {
// return a 4 window observable
} else {
// return a 2 window observable
}
}
)
);
}
I know the example above is weird, but i am just using it to ask the question.
What problems could arise with using newCar inside the sequence like being used in the example when it is external to the sequence? If there are no problems, great! Just feels like there is something wrong with this usage to me.
I think nothing (at least as far as you don't modify newCar).
It's true that you could rewrite this and start with for example the following:
of([whatever, newCar])
.pipe(
switchMap(([whatever, newCar]) => {
...
})
)
...
But I think this isn't necessary and would make things just more complicated without any real benefit.