Lettable variable

With RxJS 5.5 came the introduction of pipeable, or “lettable”, operators.

Those operators are pure functions that can be used as standalone operators instead of methods on an observable.

They’re lightweight, will make your code easily re-usable and can decrease your overall build size.

Previously, we used to do the following for things like filter , map, scan , …


import { from } from 'rxjs/observable/from';

const source$ = from([1, 2, 3, 4, 5, 6, 7, 8, 9]);

source$
  .filter(x => x % 2)
  .map(x => x * 2)
  .scan((acc, next) => acc + next, 0)
  .startWith(0)
  .subscribe(console.log)

Operators as pure functions
Whereas now all those operators are available as pure functions under rxjs/operators.

What does that mean? That means it’s really easy to build custom operators !

Let’s say I know that I’m going to re-use this filter, well, with lettable operators I can just do this:

import { filter, map, c } from 'rxjs/operators';

const filterOutEvens = filter(x => x % 2);
const sum = reduce((acc, next) => acc + next, 0);
const doubleBy = x => map(value => value * x);

So now we want a way to use those operators, how could we do that?

Well, we said those operators are “lettable” that means we can use them by calling the let method on an observable:

import { Observable } from 'rxjs/Rx';
import { filter, map, c } from 'rxjs/operators';

const filterOutEvens = filter(x => x % 2);
const sum = reduce((acc, next) => acc + next, 0);
const doubleBy = x => map(value => value * x);

const source$ = Observable.range(0, 10);

source$.let(filterOutEvens).subscribe(x => console.log(x)); // [1, 3, 5, 7, 9]

And if we want to chain multiple lettable operators we can keep dot chaining:

import { Observable } from 'rxjs/Rx';
import { filter, map, reduce } from 'rxjs/operators';

const filterOutEvens = filter(x => x % 2);
const sum = reduce((acc, next) => acc + next, 0);
const doubleBy = x => map(value => value * x);

const source$ = Observable.range(0, 10);

source$
  .let(filterOutEvens)
  .let(doubleBy(2))
  .let(sum)
  .subscribe(x => console.log(x)); // 50


The pipe method
All this looks cool but its still very verbose. Well, thanks to RxJS 5.5 observables now have a pipe method available on the instances allowing you to clean up the code above by calling pipe with all our pure functions operators:


const { Observable } = require('rxjs/Rx')
const { filter, map, reduce,  } = require('rxjs/operators')
const { pipe } = require('rxjs/Rx')

const filterOutEvens = filter(x => x % 2)
const doubleBy = x => map(value => value * x);
const sum = reduce((acc, next) => acc + next, 0);
const source$ = Observable.range(0, 10)

source$.pipe(
  filterOutEvens,
  doubleBy(2),
  sum)
  .subscribe(console.log); // 50
What does that mean? That means that any operators you previously used on the instance of observable are available as pure functions under rxjs/operators. This makes building a composition of operators or re-using operators becomes really easy, without having to resort to all sorts of programming gymnastics where you have to create a custom observable extending Observable, then overwrite lift just to make your own custom thing.


The Pipe util
Alright, hold up, “but what if I want to re-use this logic in different places ? Do I build a custom .pipe with my operators?” you’ll ask me. Well you don’t even have to do that because, lucky us, RxJS also comes with a standalone pipe utility !

import { Observable, pipe } from 'rxjs/Rx';
import { filter, map, reduce } from 'rxjs/operators';

const filterOutEvens = filter(x => x % 2);
const sum = reduce((acc, next) => acc + next, 0);
const doubleBy = x => map(value => value * x);

const complicatedLogic = pipe(
  filterOutEvens,
  doubleBy(2),
  sum
);

const source$ = Observable.range(0, 10);

source$.let(complicatedLogic).subscribe(x => console.log(x)); // 50

Meaning we can easily compose a bunch of pure function operators and pass them as a single operator to an observable!

https://blog.hackages.io/rxjs-5-5-piping-all-the-things-9d469d1b3f44