Search code examples
angularselectrxjspipestore

Why should I use select with pipe in Angular subscribe?

I was reading the docs of angular and its use of RxJS library. And I found this info

Pipes

You can use pipes to link operators together. Pipes let you combine multiple functions into a single function. The pipe() function takes as its arguments the functions you want to combine, and returns a new function that, when executed, runs the composed functions in sequence.

So the purpose of piping is to chain multiple functions, but what made me curious is that I have seen many times the use of pipe with only one function inside, eg:

this.itemSubscription = this.store
            .pipe(select(state => state.items.root))
            .subscribe(state => {
                this.items = state.items;
            });

When I try to use select without pipe, then my tslint says:

select is deprecated: from 6.1.0. Use the pipeable select operator instead. (deprecation)tslint(1)

Why is that happening? Am I missing something? Could not find any relevant explanation on the Internet.

Solution

  • Pipe was introduced to RxJS in v5.5 to take code that looked like this:

    of(1,2,3).map(x => x + 1).filter(x => x > 2);

    and turn it into this

    of(1,2,3).pipe(
  map(x => x + 1),
  filter(x => x > 2)
);

    Same output, same concept but with different syntax.

    It cleans up the 'observable.prototype' and makes the RxJS library more tree-shakeable, you only need to import what you use. It also makes it easier to write and use third-party operators.