RxJS Operators

In the .pipe( you can call any of these operators, most of the comments below are right out of the source code docs. Also see reactivex.io/documentation/operators and rxjs.dev/guide/operators.

filter

Filter items emitted by the source Observable by only emitting those that satisfy a specified predicate.

1
2
3
4
5
6
7
8
// filter to check the something comes back and properties are set
filter(storeItem => storeItem && !!storeItem.item),

// filter on a bool
filter(a => a.isLoading === false),

// filter that SOMETHING came back
filter(Boolean),

tap

Perform a side effect for every emission on the source Observable, but return an Observable that is identical to the source.

1
2
3
4
5
// quick tap to display whats coming back
tap(a => console.log(a)),
    
// if its an object
tap(a => console.log(JSON.stringify(a))),

distinctUntilChanged

Returns an Observable that emits all items emitted by the source Observable that are distinct by comparison from the previous item.

1
2
3
4
5
6
7
8
9
10
11
// only fire down to the `subscribe` when `item.listingId` changes
distinctUntilChanged((prev, curr) => prev.item.listingId === curr.item.listingId)

// Example
this._fooFacade.getCurrentListing().pipe(
	takeUntil(this._destroyed$),
	filter(storeItem => storeItem && !!storeItem.item),
	distinctUntilChanged((prev, curr) => prev.item.listingId === curr.item.listingId)
).subscribe(storeItem => {
	// do something, this was usewful when resetting state
});

map

Applies a given project function to each value emitted by the source Observable, and emits the resulting values as an Observable.

1
2
3
4
5
6
7
8
// here only `item` is emmited as an observable
map(foo => foo.item),

// here we emit the object `{ fooProp: params.fooProp }` as an observable      
this.fooParam$ = this.route.queryParams.pipe(
	map(params => {
		return { fooProp: params.fooProp };
    }));

startWith

1
2
// the first emit will be an empty array []
startWith([])

References