javascriptrxjsmarble-diagram

How to read the RxJs mergeMap marble diagram


In this marble diagram for mergeMap, how do you read this expression?

// Kind of, looks like an em-dash near the end
mergeMap(i => 10*i--10*i--10*i--|)

enter image description here


Solution

  • mergeMap maps i to an observable represented by the string 10*i--10*i--10*i-|. This string contains marble syntax representing events happening over virtual time.

    The main characters used in the documentation are:

    • - frame: 1 "frame" of virtual time passing
    • [a-z0-9] any alphanumeric character: Represents a value being emitted by the producer signaling next().
    • | complete: The successful completion of an observable. This is the observable producer signaling complete().
    • # error: An error terminating the observable. This is the observable producer signaling error().

    So 10--10--10-| would be an expression for the second observable in the picture. e.g.

    const tens$ = timer(0, 4).pipe(take(3), mapTo(10))
    

    10*i--10*i--10*i-| is an expression for the observable you get when you multiply every value emitted by 10--10--10-| with i. e.g.

    of(1,3,5).pipe(
      mergeMap(i => tens$.pipe(map(v => v*i)))
    )