What is pipe for in rxJS

angular rxjs rxjs5
enno.void picture enno.void · Feb 7, 2018 · Viewed 67.7k times · Source

I think I have the base concept, but there are some obscurities

So in general this is how I use an observable:

observable.subscribe(x => {

})

If I want to filter data I can use this:

import { first, last, map, reduce, find, skipWhile } from 'rxjs/operators';
observable.pipe(
    map(x => {return x}),
    first()
    ).subscribe(x => {

})

I can also do this:

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/first';

observable.map(x => {return x}).first().subscribe(x => {

})

So my questions are:

  1. What is the difference?
  2. If there is no difference, why the function pipe exists?
  3. Why those functions need different imports?

Answer

martin picture martin · Feb 7, 2018

The "pipable" (former "lettable") operators is the current and recommended way of using operators since RxJS 5.5.

I strongly recommend you to read the official documentation https://rxjs.dev/guide/v6/pipeable-operators

The main difference is that it's easier to make custom operators and that it's better treeshakable while not altering some global Observable object that could possible make collisions if two different parties wanted to create an operator of the same name.

Using separate import statement for each operator 'rxjs/add/operator/first' was a way to make smaller app bundles. By importing only operators you need instead of the entire RxJS library you can significantly reduce the total bundle size. However the compiler can't know if you imported 'rxjs/add/operator/first' because you really need it in you code or you just forgot to remove it when refactoring your code. That's one of the advantages of using pipable operators where unused imports are ignored automatically.

Related questions

How to return value from function which has Observable subscription inside?

I dont know how to extract value from Observable to be returned by function in which Observable is present. I need just a value from it to be returned, nothing else. Current version which works function getValueFromObservable() { this.store.subscribe( (…

Read More
What is the correct way to share the result of an Angular Http network call in RxJs 5?

By using Http, we call a method that does a network call and returns an http observable: getCustomer() { return this.http.get('/someUrl').map(res => res.json()); } If we take this observable and add multiple subscribers to it: …

Read More
Typescript Select Ids from object

I am new to Typescript. I want to select ids from observable This is my observable let myObj = [{ "id": 1, "text": "Mary" }, { "id": 2, "text": "Nancy" }, { "id": 3, "text": "Paul" }, { "id": 4, "text": "Cheryl" }, { "id": 5, "text": "Frances" }] Expected Result : let selectedIds = [1,2,3,4,5]; Can I do …

Read More