CODEWITHSUNDEEP
angularrxjsangular7angular-reactive-forms
user3212507
user3212507

Reputation: 173

Multiple subscriptions to same Observable

I have several subscriptions in one of the components in my application and I could see that there are several instances where we are subscribing to same observable repetitively.

One issue that I recently came across is setting a value for one control in one subscription logic is conflicting with another and both subscriptions are on same observable's. we have fixed that issue by adding more specific conditions to avoid conflicts but it made me wonder subscribing to same observable combination repetitively is really a good practice (I assume we could just write all logic in single subscriber)? Could it cause any performance issues in the long run as App grows?

    combinelatest(observable1, observable2).pipe(
    tap(() = > {
    // do some logic
    // update Property1 to foo
    })
    ).subscribe();

    combinelatest(observable1, observable2).pipe(
    tap(() = > {
    // do some logic
    })
    ).subscribe();

    combinelatest(observable1, observable2, observable3).pipe(
    tap(() = > {
    // do some logic
    // // update Property1 to foofoo
    })
    ).subscribe();

observable1.pipe(
    tap(() = > {
    // do some logic
    })
    ).subscribe()

Any guidance is much appreciated.

Upvotes: 0

Views: 5941

Answers (3)

Adrian Brand
Adrian Brand

Reputation: 21638

combinelatest(observable1, observable2).pipe(
  tap(() = > {
  // do some logic
  // update Property1 to foo
  })
).subscribe();

This is mutating the data that is flowing through the stream. This is bad practice, you should not mutate any data that is going through the stream. You should be creating new objects rather than mutating objects. The correct way is to use map and return a new instance of an object and leave the original alone.

combinelatest(observable1$, observable2$).pipe(
  map(([data1, data2]) = > {
    return [data1, { ...data2, prop1: 'foo' }];
  })
).subscribe();

In modern JavaScript apps we don't mutate objects as it causes unpredictable side effects.

There is nothing wrong with multiple observers subscribing to the same observables but nothing should be mutating any of the objects that flow through them.

Upvotes: 0

Fan Cheung
Fan Cheung

Reputation: 11345

There is nothing wrong with subscribe multiple times on a share observable. However having say that, often observable can be split up with sense to be reused and there is no fix rule on the granularity of each observable, each observable should be defined to fit your application requirement

for example we have a get blog post button if you want multiple component to listen to that event you can just do

const onGetPostClick=fromEvent(button,'click')

then you want to execute get post http call and also allow other component to listen to such event. 

const onGetPost=onGetPostClick.pipe(mergeMap(e=>fetch()....),share())

if you only interested in post in news category

const onGetNews=onGetPost.pipe(filter(post=>post.cat==='news'))

give meaning to each observable you will find your code much more DRY and minimal

Upvotes: 2

Mises
Mises

Reputation: 4603

Subscribing to one observable many times is a good practice. But you have to keep on mind to unsubscribe subscription you make. When you subscribe multiple time to one observable and not unsubscribe subscription you make, it may cause memory leaking.

Upvotes: 0

Related Questions