Hullo 👋 core
Hullo 👋 browser
Hullo 👋 DOM
Hullo 👋 Node
|> deepMap
import { deepMap } from '@hullo/core'
This is an advanced operator. Mind that example uses other operators to showcase what it does. You are expected to familiarise yourself with them first.
Use this operator in case you have an observable with an array and you want to process each item of that array as if it was a message on its own incoming through, also, standalone stream.
deepMap operator takes a source stream of arrays of some items and creates dedicated stream for "each item at certain position" in arrays coming through the source stream. Longer array creates new streams, values changing at positions make for new values coming through those streams and when array shrinks sub-streams are closed. It then runs (user provided) transformation function on each stream which execution result will be an item in the resulting array.Explanation of this example is below it.
1
import {
2
Observable,
3
map,
4
deepMap,
5
switchMap,
6
combineLatest
7
} from '@hullo/core';
8
9
new Observable<number[]>(observer => {
10
observer.next([1]);
11
observer.next([2, 10]);
12
observer.next([100, 10]);
13
})
14
.pipe(
15
deepMap(
16
(items: Observable<number>, _i: number) =>
17
items.pipe(map(n => n * 2))
18
)
19
)
20
.pipe(
21
switchMap(
22
combineLatest
23
)
24
)
25
.subscribe({
26
next: v => {
27
console.log(v);
28
}
29
})
Copied!
Quick overview:
Messages (array) are submitted through source observable, then processed with
deepMap and a simple transformation function in a way that can be reversed with switchMap+combineLatest so the output of whole calculation is the similar to source, but each number is doubled.First message (array of numbers) is passed into deepMap and then provided to deepMap function is run for that one item in the array-message. Provided function expects an observable submitting a value that appeared on certain (always the same) spot on the array-message. Let's call it an item-observable.
On first occurrence of a value on a spot in array-message as well as on a first array-message from a source observable processed by deepMap, function provided to deepMap is run. First occurrence in a spot, as well as every other change happening under a particular index in every other consecutive array-message will trigger a new message being sent through provided observable and will not run the function that first received it. Detail-observable is a stateful observable meaning, on every new subscription it'll immediately reemit last message.
Here, transformation is to output derivative stream of values where each is multiplied by two. Since the output is not expected to be specifically an observable (can be anything) deepMap returns an stream of arrays of observables of numbers (Observable<Array<Observable<number>>>) and to flatten it back to Observable<Array<number>> like the source we need combineLatest to make Array<Observable<number>> into Observable<Array<number>> and then flattening what can be expressed as Observable<Observable<Array<number>> is easing as it not done by regular
map operator, but made for such occasions - switchMap.Second message on source observable will cause provided function to deepMap to run creating new derivative stream, as now there is a new spot on the message array, occupied by
10. First derivative stream will receive a new message with a value as 1 turned into 2 on index 0.Lastly third message will not cause provided function to deepMap to run at all. Then only one detail-observable will send out new message as only one spot on array-message changed since last one.
Last modified 3yr ago
Copy link