Transformation Operators part I

• map
• scan


• mergeMap
• concatMap
• switchMap
• exhaustMap


• buffer
• bufferWhen
• bufferCount
• bufferTime
• bufferToggle

Observable as a Monad!

MergeMap Operator

Named flatMap Operator on RxJS <= 4.X

        const clicks$ = rxjs.fromEvent(document, 'click')
        clicks$.pipe(rxjs.operators.mergeMap((ev) => rxjs.interval(1000)))
    

Maps each value to an Observable, then flattens all of these inner Observables using mergeAll

concatMap Operator

                const clicks$ = rxjs.fromEvent(document, 'click')
                clicks$.pipe(rxjs.operators.concatMap(
                    (ev) => rxjs.interval(1000)
                        .pipe(rxjs.operators.take(5)))
                )
        

Maps each value to an Observable, then flattens all of these inner Observables using concatAll

switchMap

            const clicks$ = rxjs.fromEvent(document, 'click')
            clicks$.pipe(
                rxjs.operators.switchMap(
                    (ev) => rxjs.interval(1000).pipe(rxjs.operators.take(5))
                )
            )
    

Maps each value to an Observable, then flattens all of these inner Observables using switchAll || Map to observable, complete previous inner observable, emit values

ExhaustMap Operator

                const clicks$ = rxjs.fromEvent(document, 'click')
                clicks$.pipe(rxjs.operators.exhaustMap(
                        (ev) => rxjs.interval(1000).pipe(rxjs.operators.take(5))
                    )
                )
        

Maps each value to an Observable, then flattens all of these inner Observables using exhaust || Map to inner observable, ignore other values until that observable completes

Other Transformation Operators

• pluck(...stringPropertyName) => Like map, but meant only for picking one of the nested properties of every emitted object here
• mapTo(value) => Like map, but it maps every source value to the same output value every time here


• expand => Recursively call provided function here


• partition(predicateFunction, thisArg) => It's like filter, but returns two Observables: one like the output of filter, and the other with values that did not pass the condition here
• groupBy(selectorFunction) => groups the items emitted by an Observable according to a specified criterion, and emits these grouped items as GroupedObservables here