I am very new to rxjs and was just wondering is it ok to setup a class property by piping the stream and tapping it, or it should i do it in the subscribe. To me either way works, just wonder if it is ok to do it as I see fit to my eyes or there is something I am unaware of.
Typescript code demonstrating both ways:
export class ViewComponent implements OnInit { applicant = {}; constructor(public route: ActivatedRoute, private store: Store<any>) {} ngOnInit() { this.route.paramMap.pipe( switchMap(params => this.store.select(state => state.applicants.entities[params.get('id')])), tap(applicant => this.applicant = applicant) ).subscribe(); } }
vs
export class ViewComponent implements OnInit { applicant = {}; constructor(public route: ActivatedRoute, private store: Store<any>) {} ngOnInit() { this.route.paramMap.pipe( switchMap(params => this.store.select(state => state.applicants.entities[params.get('id')])) ).subscribe(applicant => this.applicant = applicant); } }
RxJS tap() operator is a utility operator that returns an observable output that is identical to the source observable but performs a side effect for every emission on the source observable.
The Angular Tap RxJs operator returns an observable that is identical to the source. It does not modify the stream in any way. Tap operator is useful for logging the value, debugging the stream for the correct values, or perform any other side effects.
The pipe method is for chaining observable operators, and the subscribe is for activating the observable and listening for emitted values. The pipe method was added to allow webpack to drop unused operators from the final JavaScript bundle. It makes it easier to build smaller files.
Subscribing to an Observable is like calling a function, providing callbacks where the data will be delivered to. This is drastically different to event handler APIs like addEventListener / removeEventListener . With observable. subscribe , the given Observer is not registered as a listener in the Observable.
Good question. In the source code for the tap
operator, this comment pretty much sums it up:
This operator is useful for debugging your Observables for the correct values or performing other side effects.
Note: this is different to asubscribe
on the Observable. If the Observable returned bydo
is not subscribed, the side effects specified by the Observer will never happen.do
therefore simply spies on existing execution, it does not trigger an execution to happen likesubscribe
does.
Any side effect you can run in a tap
can probably also be put in the subscribe
block. The subscribe
indicates your intent to actively use the source value since it's saying "when this observable emits, I want to save it's value in the applicants
variable". The tap
operator is mostly there for debugging, but it can be used to run side effects.
In general, favor the subscribe
block for running side effects, use tap
for debugging, but be aware that tap
can do more if you need it to.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With