Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Use case of Observable .do() operator (rxjs)

 Context :

I'm building an angular 2 app (with a Firebase API). I'm using the AngularFire module. I was wondering how I can mix the canActivate method with the AngularFire auth Observable, and I found this post. The answer is to make the canActivate method returns an Observable<boolean> :

canActivate(): Observable<boolean> {   return this.auth     .take(1)     .map((authState: FirebaseAuthState) => !!authState)     .do(authenticated => {       if (!authenticated) this.router.navigate(['/login']);     }); } 

It's the first time I see the Observable do operator, and I can't understand what it really does ? The official doc didnt help me, and I didn't found decent examples.

Question:

Can someone bring here some examples of .do() usage ? And difference with .subscribe() ?

like image 875
soywod Avatar asked Dec 04 '16 09:12

soywod


People also ask

What does the RxJS of operator do?

The of Operator is a creation Operator. Creation Operators are functions that create an Observable stream from a source. The of Operator will create an Observable that emits a variable amount of values in sequence, followed by a Completion notification.

What does pipe do in Observable?

The pipe method of the Angular Observable is used to chain multiple operators together. We can use the pipe as a standalone method, which helps us to reuse it at multiple places or as an instance method. In this tutorial, we will take a look at the pipe and learn how to use it in an Angular Application.

What does complete do in Observable?

There are three types of values an Observable Execution can deliver: "Next" notification: sends a value such as a Number, a String, an Object, etc. "Error" notification: sends a JavaScript Error or exception. "Complete" notification: does not send a value.

Why we use RxJS operators in Angular?

RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code.


2 Answers

Update

Now it's pipe( tap(...), ) instead of do()

Original

.do() is to execute code for each event. A difference to .map() is, that the return value of .do() is ignored and doesn't change what value the subscriber receives.

like image 69
Günter Zöchbauer Avatar answered Nov 07 '22 09:11

Günter Zöchbauer


Now it's pipe( tap(...), ) instead of do()

const source = of(1, 2, 3, 4); source.pipe(   tap(val => console.log('I am tap: ',val)),   filter(val =>  val > 2),   map(val => val + 1)).subscribe((val) => {   console.log('I am subscriber value after filtering: ', val); }); 

Output:

I am tap:  1 I am tap:  2 I am tap:  3 I am subscriber value after filtering:  4 I am tap:  4 I am subscriber value after filtering:  5 

*Tap operator doesn't modify anything, you can say that it is just to view the stream.

like image 34
Muhammad Bilal Avatar answered Nov 07 '22 09:11

Muhammad Bilal