When should we use the RxJS tap operator?

Question

I do not understand from the docs. Could anyone explain it to me?

Solution 1

Most of the operators are working in streamed sequence, for example:

source$.pipe(
  map((a: string) => changeAndReturnArray(a)),
  filter((b: string[]) => giveMeOnlySymbolsThatAreAfterNInAlphabet(b)),
  switchMap((c: string[]) => putToSomeObservable(c))
  ....
);

In that example you are not 'breaking' the stream, or jumping outside of it to do some external action. Jumping outside of stream is possible with 'tap' operator, where you can:

• call functions that will cause some side effect, that might be visible to end user (for example - display dialog, show snackbar, redirect to different route (but in my opinion it's not recommended to use tap in that way))
• dispatch actions for store (if you are using any - for example ngrx store)
• debug you're code -> console.log()
• anything what can be considered as 'side effect' for your stream.

My personal opinion - use 'tap' only if you can't find any better solution. Jumping outside of stream and calling some side effect can be double edged sword, especially when your dealing with some bigger application. Side effect are always harder to maintain, and you can finish with application that is doing magic stuff without any reason.

Solution 2

You can use it to perform a side effect for example. Or you can use it to see what's the current value that is being passed around without affecting/modifying the Observable. So something like a console.log() but inside the stream.

Comments

[jonrsharpe]

Please be more specific about what you do and to not understand from that document.

[Florian]

tap handles (next), (error), (complete) events, so you can perform actions. learnrxjs.io/operators/utility/do.html If that doesn't help you, as johnrsharpe said, please, be more specific.

[Indraraj26]

so basically we use it for console.log, can you give me more example other than console.log

[Badashi]

if you need to maintain a side effect that is tied to the emission of the observable but not directly tied to its result. For example, you could start an animation. Or you could have a separate variable that tracks the number of times an observable emitted a value. There's no way to give an "example", it's an utility function that act as a middle-callback inside an Observable's pipeline.

[Indraraj26]

so basically we use it for console.log, can you give me more example other than console.log

[Dzhavat Ushev]

If you use state management like NGXS then you'll most likely use tap to set/update the store. Here's an example (ngxs.gitbook.io/ngxs/concepts/state#async-actions) (take a look at the code and read the text afterwards).

[Dzhavat Ushev]

Glad I could help. Can you mark one of the answers as accepted by clicking on the checkmark on the left? That way people will know you've figured out your problem.