I want to make an http request, without affecting the value of the parent stream:
const mockHttpCall = () => of('http-result');
of('result1')
.pipe(
switchMap(() =>
mockHttpCall().pipe(
tap((innerResult) => console.log('innerResult: ', innerResult))
)
)
)
ie: this stream should return result1 rather than http-result.
How can I do this? I think something might be possible using withLatestFrom and map back to the original value but not sure if it is good idea.
Stackblitz: https://stackblitz.com/edit/rxjs-lrcuse?devtoolsheight=60&file=index.ts
You can just map back to the original value:
of('result1')
.pipe(
switchMap((result) =>
mockHttpCall().pipe(
tap((innerResult) => console.log('innerResult: ', innerResult)),
map(() => result)
)
)
)
.subscribe(console.log)
Related
I've got this ngrx effect and I want to use the data from my state using withLatestFrom.
$loadProduct = createEffect(() =>
this.actions$.pipe(
ofType(fromActions.loadProduct),
withLatestFrom(this.store.select(fromSelectors.debounceTime)),
delay(debounceTime), // how can I get the debounceTime value up here?
map(_ => fromActions.foo())
)
)
How can I get this debounceTime value within the scope of delay?
Since delay is just delayWhen(() => timer(duration));, I think you can use delayWhen to solve the problem:
$loadProduct = createEffect(() =>
this.actions$.pipe(
ofType(fromActions.loadProduct),
withLatestFrom(this.store.select(fromSelectors.debounceTime)),
delayWhen(([, debounceTimeVal]) => timer(debounceTimeVal)),
map(_ => fromActions.foo())
)
)
As a side note, delayWhen is just an interesting use case of mergeMap: instead of emitting the inner value, the outer value is emitted instead.
How about this:
$loadProduct = createEffect(() =>
this.actions$.pipe(
ofType(fromActions.loadProduct),
withLatestFrom(this.store.select(fromSelectors.debounceTime)),
switchMap(([_, debounceTime]) => timer(debounceTime)),
map(_ => fromActions.foo())
)
)
It's using RxJS's switchMap and timer instead of delay.
By the way, if you do not need the action somewhere in the subsequent part of the pipe, you may also use switchMap instead of withLatestFrom like this:
$loadProduct = createEffect(() =>
this.actions$.pipe(
ofType(fromActions.loadProduct),
switchMap(() => this.store.select(fromSelectors.debounceTime)),
switchMap(debounceTime => timer(debounceTime)),
map(() => fromActions.foo())
)
)
How to combine the distinct, switchMap and mergeMap operators, so that when the source emits repeated values (detected by distinct.keySelector), the previous subscription is canceled (as in the switchMap), but if the value is not repeated follow the behavior of mergeMap?
Example:
source = from(1, 2, 1, 2, 3) // 'abcde'
result = source.pipe(delay(), combination() // '--cde'
I'm currently doing something like:
const activeSubscriptions = new Map();
source$.pipe(
mergeMap((value) => {
const pendingSubscription = activeSubscriptions.get(value);
if (pendingSubscription) {
pendingSubscription.unsubscribe();
activeSubscriptions.delete(value);
}
const request$ = new Subject();
const subscription = this.service.get(value).subscribe({
complete: () => request$.complete(),
error: (err) => request$.error(err),
next: (value) => request$.next(value),
});
activeSubscriptions.set(value, subscription);
return request$;
})
);
But looking for a better way to do that.
Thank you in advance
I think you can use the windowToggle operator for this:
src$ = src$.pipe(shareReplay(1));
src$.pipe(
ignoreElements(),
windowToggle(src$.pipe(observeOn(asyncScheduler)), openValue => src$.pipe(skip(1), filter(v => v === openValue))),
mergeMap(
window => window.pipe(
startWith(null),
withLatestFrom(src$.pipe(take(1))),
map(([, windowVal]) => windowVal),
)
),
)
A replacement for observeOn(asyncScheduler) could also be delay(0), the important thing is to make sure the order in which the src$'s subscribers receive the value is correct. In this case, we want to make sure that when src$ emits, the clean-up takes place first, so that's why we're using src$.pipe(observeOn(asyncScheduler)).
ignoreElements() is used because each window is paired to only one value, the one which has created the window. The first argument(s) passed to windowToggle will describe the observable(s) which can create the windows. So, we only need those, since we're able to get the last value with the help of
window => window.pipe(
startWith(null),
withLatestFrom(src$.pipe(take(1))),
map(([, windowVal]) => windowVal),
)
By the way, a window is nothing but a Subject.
Lastly, if you want to perform async operations inside the window's pipe, you'll have to make sure that everything is unsubscribed when the window is completed(closed). To do that, you could try this:
window => window.pipe(
startWith(null),
withLatestFrom(src$.pipe(take(1))),
map(([, windowVal]) => windowVal),
switchMap(val => /* some async action which uses `val` */),
takeUntil(window.pipe(isEmpty()))
)
where isEmpty will emit either true or false when the source(in this case, the window) completes. false means that the source had emitted at least one value before emitting a complete notification, and true otherwise. In this case, I'd say it's irrelevant whether it's true or false, since the window will not emit any values by itself(because we have used ignoreElements, which ignores everything except error and complete notifications).
I need to write marble test for my custom operator used in this loadEpic epic - this helps me to avoid problems that action INITIALiZE sometimes is dispatched to late and i getting LOAD_FAILURE:
loadEpic: Epic<ExamManagementAction, ExamManagementAction, RootState> = (
action$,
state$
) =>
action$.pipe(
filter(isActionOf(load)),
waitFor(state$),
switchMap(() =>
this.load(state$).pipe(
map(loadSuccess),
catchError(error => of(loadFailure({ error })))
)
)
);
and this is how i wrote my waitFor operator which works fine:
const waitFor = <T>(
state$: Observable<RootState>
): OperatorFunction<T, T> => source$ =>
source$.pipe(
switchMap(value =>
state$.pipe(
filter(state => state.navigation.initialized),
take(1),
mapTo(value)
)
)
);
can you help me to write this test with rxjs-marbles/jest or any similar approach? many thanks!
You describe three streams of events:
states (mock them with simple objects)
actions (again, you may use any JS value as a mock)
filtered actions (the same object as in 2)
Then you expect your operator to transform 2 to 3 with toBeObservable matcher. That's it.
it('should reject given values until navigation is initialized', () => {
const state$ = hot(' -i--u--u-i-- ', {u: {navigation: {initialized: false}}, i: {navigation: {initialized: true}}});
const action$ = hot(' v----v--v--- ', {v: load});
const expect$ = cold(' -v-------v-- ', {v: load});
expect(action$.pipe(waitFor(state$))).toBeObservable(expect$);
});
Note how I've formatted my code so one stream is described under another. It really helps with long sequences of events.
You might also write separate specs for edge cases. It depends on what behavior you want to test.
I have 2 requests.
getCurrentBook(): Observable<Book>
getDetailedInfo(bookId): Observable <BookDetailed>
They both return observables with information, however to use second request I have to make sure that I received the information from the first one since bookId is in the response.
I understand that I could subscribe inside other subscribe, however this solution doesn't seem appealing to me. There must be a much more elegant way.
The existing solution
getCurrentBook().subscribe(res => {
getDetailedInfo(res.id).subscribe(...);
})
I get that it should look something like:
booksSubs = getCurrentBook().pipe(
map(res =>
{this.currentBook = res}
)
)
detailedSubs = getDetailedInfo(this.currentBook.id).pipe(
map(res =>
{this.detailed = res}
)
)
this.subscriptions.push(SOME OPERATOR(booksSubs, detailedSubs).subscribe();
But the option higher won't work since I need result of first observable to initialize second.
You can achieve it using some of "flattening" operators, for example mergeMap:
const currentBookDetails$ = getCurrentBook().pipe(
mergeMap(book => getDetailedInfo(book.id))
);
I have a scenario where I need to make a request to an endpoint, and then based on the return I need to either produce multiple items or just pass an item through (specifically I am using redux-observable and trying to produce multiple actions based on an api return if it matters).
I have a simplified example below but it doesn't feel like idiomatic rx and just feels weird. In the example if the value is even I want to produce two items, but if odd, just pass the value through. What is the "right" way to achieve this?
test('url and response can be flatMap-ed into multiple objects based on array response and their values', async () => {
const fakeUrl = 'url';
axios.request.mockImplementationOnce(() => Promise.resolve({ data: [0, 1, 2] }));
const operation$ = of(fakeUrl).pipe(
mergeMap(url => request(url)),
mergeMap(resp => resp.data),
mergeMap(i =>
merge(
of(i).pipe(map(num => `number was ${num}`)),
of(i).pipe(
filter(num => num % 2 === 0),
map(() => `number was even`)
)
)
)
);
const result = await operation$.pipe(toArray()).toPromise();
expect(result).toHaveLength(5);
expect(axios.request).toHaveBeenCalledTimes(1);
});
Personally I'd do it in a very similar way. You just don't need to be using the inner merge for both cases:
...
mergeMap(i => {
const source = of(`number was ${i}`);
return i % 2 === 0 ? merge(source, of(`number was even`)) : source;
})
I'm using concat to append a value after source Observable completes. Btw, in future RxJS versions there'll be endWith operator that will make it more obvious. https://github.com/ReactiveX/rxjs/pull/3679
Try to use such combo - partition + merge.
Here is an example (just a scratch)
const target$ = Observable.of('single value');
const [streamOne$, streamTwo$] = target$.partition((v) => v === 'single value');
// some actions with your streams - mapping/filtering etc.
const result$ = Observable.merge(streamOne$, streamTwo$)';