What's the point of mapTo in RxJs?

user_1525840 0
Viewed 1609

I'm reading the docs for mapTo and I'm simply not getting the point of that operator's existence. I get what it does but the two line below should produce equivalent result.

const outcome = "bzzz";
const result1 = source.map(a => outcome);
const result2 = source.mapTo(outcome);

Yet, the creators of RxJs chose to increase complexity by adding an extra method. It seems pointless as such, so I'm suspecting there's more to it than what meets the eye.

What's the point of having a dedicated operator for such a specific case?

rxjs typescript javascript
2 Answers

The differences between map and mapTo

At first sight, we can see that map accepts a callback function

function map<T, R>(project: (value: T, index: number) => R, thisArg?: any)

whereas mapTo accepts a static value

function mapTo<R>(value: R)

So, a clear difference is that map's callback function can generate a value depending on the arguments provided. This is not the case for mapTo, where you just simply provide a value that will be always passed along to the next subscriber in the chain. If you will, mapTo(value) can be though of as

map(() => value)

We can also deduce this from the source code:

// `mapTo`
() => subscriber.next(value)

// `map`; `project` is the provided callback function
() => subscriber.next(project.call(thisArg, value, index++));

But you might not want to do that, why call a function when you can directly use a value?

Some use cases

A use case might be when you have a NgRx effect and you want to return the same, non-dynamic, action, when something happens.

createEffect(
  () => this.actions.pipe(
    /* some logic here... */
    mapTo(staticAction('a message here')),
  )
);

Another one, which might not seem very practical, is when you want to simulate some requests coming in:

merge(
  timer(300).pipe(mapTo("req#1")),
  timer(600).pipe(mapTo("req#2")),
  timer(100).pipe(mapTo("req#3")),
  timer(900).pipe(mapTo("req#4")),
).pipe(
  /* some complicated logic here... */
)

Anyway, the point of this operator is, at least from my perspective, to indicate that you want to pass along static values, thus values that are not dependent on data from the previous subscriber.

user_96326210

mapTo is really just a convenience for a specific mapping scenario where:

  1. The output does not depend on emission from the source observable
  2. The output will always be the same static value

The second point is important to note, because if the target value changes over time, there will be differences in the output between map(a => target) and mapTo(target):

  • map(a => outcome) - will return the current value of 'outcome' (possibly different results)
  • mapTo(outcome) - will return the first emitted value of 'outcome' (same result every time)
let outcome = 0;
// change 'outcome' every second
interval(1000).pipe(tap(n => outcome = n * 2)).subscribe();

const source = interval(1000).pipe(take(4));

source.pipe(map(a => outcome));  // 0, 2, 4, 6
source.pipe(mapTo(outcome));     // 0, 0, 0, 0

StackBlitz demo

user_18583570
Related