RxJS - subscribe only once but do not complete Observable

Question

imagine situation when you have some Observable that contains data that changes in real time, example below...

interface User {
   name: string;
   projectId: string;
   dataThatChangesALotInRealTime: Object;
}

userData: Observable<User>

This userData observable is used in component to show some data that changes in real time. e.g.

<p>
{{ (userData | async)?.dataThatChangesALotInRealTime }}
</p>

Now I want to insert some data to database according to current data in userData observable. Here is the function

addToDatabase() {
  let sub = this.userData.subscribe(data => {
     this.exampleDatabase.doc(`test/${data.dataThatChangesALotInRealTime.id}`)
          .add({ test: 'hello'})
     sub.unsubscribe() // <- This
  })
}

Question

Is this a correct solution to unsubscribe inside subscription to avoid multiple insertion into database? Is there a different/better way to do this?

This is just minimalistic example, if you have some questions or my explanation is poor, let me know in comments and I will update my question. Thank you

Ingo Bürk · Accepted Answer · 2018-12-09T13:15:58.283

26

You can use the first operator:

this.userData.pipe(first()).subscribe(...);

This will automatically complete (and therefore unsubscribe) after the first value has been emitted.

Note that you should ensure that it emits at least once before completing as otherwise an error will be thrown. If you can't ensure this, you can use take(1) instead:

this.userData.pipe(take(1)).subscribe(...);

Note that this doesn't actually modify the userData observable directly, so other subscriptions to it will continue emitting regardless. This is because operators in rxjs do not modify observables but instead return a new observable.

edited Dec 09 '18 at 13:15

answered Dec 09 '18 at 13:03

Ingo Bürk

16,020
5
56
88

I don't want to complete the `userData` observable. i still want to show data in component and maybe fire the function `addToDatabase()` multiple times... – Raold Dec 09 '18 at 13:07
1

@Raold It doesn't stop you from doing that. The "original" observable is untouched since operators always return a new observable. So any other subscriptions to userData are unaffected by it. – Ingo Bürk Dec 09 '18 at 13:08
If I understand correctly, whenever i use `pipe` operator it will creates new observable? – Raold Dec 09 '18 at 13:10
1

Yes, rxjs uses immutability in this regard, so adding an operator doesn't modify the original observable but returns a new one instead. – Ingo Bürk Dec 09 '18 at 13:11
Thank you :) Can you update your answer with this information too? It would help others, who's looking for answer. – Raold Dec 09 '18 at 13:14
1

@Raold I've added it. Cheers. – Ingo Bürk Dec 09 '18 at 13:16

RxJS - subscribe only once but do not complete Observable

1 Answers1