7

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)

Marko Kacanski
  • 423
  • 9
  • 17
  • 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 Oct 18 '18 at 13:07
  • 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 Oct 18 '18 at 13:12
  • Possible duplicate of [What does subscribe do, and how it is related to Observable?](https://stackoverflow.com/questions/46767880/what-does-subscribe-do-and-how-it-is-related-to-observable) – n00dl3 Oct 18 '18 at 13:38

2 Answers2

7

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

Oles Savluk
  • 4,315
  • 1
  • 26
  • 40
3

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")
)
M'sieur Toph'
  • 2,534
  • 1
  • 21
  • 34
  • 1
    You basically did multicasting "manually". Same will happen if you put `share()` right after `tap()` in `badSource` - side effect will be executed once. – Oles Savluk Nov 18 '19 at 10:10
  • 1
    This is totally fine, but longer and you are not propagating errors which might cause issues – Oles Savluk Nov 18 '19 at 10:24
  • Ooooooooooooooooooooooooooo ... I think I just figured something out : during my tests, I put the `share()` **BEFORE** the `tap()`, and indeed it did not work! Now, it makes sense to me: it can only "share" what is "before itself". I need to "share" **AFTER** all the pipes. Anyway, thank you so much for this small explanation (and you are totally right about the no-propagation of errors ... I missed this part) ... feeling dumb right now! :( – M'sieur Toph' Nov 18 '19 at 21:52