In RxJS, why does a pipe get executed once for each subscription?

5
votes

I want to have multiple subscriptions to react to an observable event, but I want to log the event as well, so I pipe it through a do() operator in which I do the logging.

The problem is, the event gets logged once for each of the subscriptions I create!

I'm getting around this at the moment by creating a Subject and calling next on it from an event callback, which allows me to log the event once and trigger multiple subscriptions as well.

Here is some code that demonstrates the issue: https://stackblitz.com/edit/rxjs-xerurd

I have a feeling I'm missing something, isn't there a more "RxJS" way of doing this?

EDIT:

I'm not asking for a difference between hot & cold observable, in fact I was using a hot observable - the one created by fromEvent() and was wondering why does my presumably hot event source behave like it's cold.

I realize now - after reading about share() - that pipe() "turns" your observable cold i.e. returns a cold one based on the your source (which may be cold, may be hot)

2
javascriptrxjsreactive-programming
This is what RxJS is supposed to do. You can use share() operator if you want to keep only one subscription to its source. – martin
Thank you for answering so quickly! share() indeed seems to be what I'm looking for, but could you perhaps (if you know why it is so) explain the reasoning behind such a design? It seems to me that maybe "sharing" should be a default and, "not sharing" should have an operator. – Marko Kacanski
Possible duplicate of What does subscribe do, and how it is related to Observable? – n00dl3

2 Answers

5
votes

Because Observable sequences are cold by default, each subscription will have a separate set of site effects.

If you want your side effect to be executed only once - you can share subscription by broadcasting a single subscription to multiple subscribers. To do this you can use share, shareReplay, etc.

To better understand how it works, what is "cold" and publish, refer to the RxJS v4 documentation:

4.8 Use the publish operator to share side-effects

1
votes

EDIT : share() is finally working. Please have a look to the comments below. Thx to @Oles Savluk.

I let my answer below for the records. It may help.

share() and multicasting stuffs did not solve my very similar issue.

Here is how I solved it : https://stackblitz.com/edit/rxjs-dhzisp

const finalSource = new Subject();
fromEvent(button3, "click").pipe(
  tap(() => {
    console.log("this happens only once")
  }) 
).subscribe(() => finalSource.next())

finalSource.subscribe(
  () => console.log("first final subscription")
)

finalSource.subscribe(
  () => console.log("second final subscription")
)

finalSource.subscribe(
  () => console.log("third final subscription")
)