Having trouble calling RxJS share using the recommended operator import

Question

I'm trying to understand the best practice for importing rxjs operators

It seems like I should import share this way, but, the following doesn't work because it says share expects 0 arguments. I'm not quite sure how to call share correctly.

import { share } from 'rxjs/operators';

...

public currentUser: Observable<User> = share(this.currentUser$.asObservable());

Doing it the old way causes no problems. However I seemed to have read that's not the preferred way to import https://www.learnrxjs.io/concepts/operator-imports.html

import 'rxjs/add/operator/share';

...

public currentUser: Observable<User> = this.currentUser$.asObservable().share();

How should I call share if I'm using the recommended way of importing?

Note that there also exists a [shareReplay](https://blog.thoughtram.io/angular/2018/03/05/advanced-caching-with-rxjs.html) operator that possibly is more useful and what you want to use. — hlovdal, Oct 27 '21 at 09:47

score 3 · Answer 1 · answered Jan 14 '18 at 15:35

Using share is like any other "pipable" operator since RxJS 5.5:

import { share } from 'rxjs/operators';

...

this.currentUser$.pipe(share());

For more details about pipable operators see: https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md

However be aware that importing from rxjs/operators imports this entire file https://github.com/ReactiveX/rxjs/blob/master/src/operators/index.ts.
This means that if you bundle your app yourself it might grow in size significantly.

So you might want to import each operator from it's own file like:

import { share } from 'rxjs/internal/operators/share';

... and then use it the same way.

This isn't always necessary. If you're using a preconfigured build system like angular-cli it does path mappings for you so you don't need to worry about it and always use rxjs/operators. You can read more about this:

score 0 · Answer 2 · answered Jan 14 '18 at 14:05

0

In RxJs 5.5 onwards, RxJs introduce Pipeable (or lettable) operators. Read in details here: https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md

In short, using the below way is good in Rxjs 5.5 especially if you are using typescript.

import { share } from 'rxjs/operators';

answered Jan 14 '18 at 14:05

Jecfish

4,026
1
18
16

so I tried importing the share like the suggestion but can't seem to figure out how to call `share` as in the example since it expects 0 arguments. – MonkeyBonkey Jan 14 '18 at 14:06
Just this line will work. `public currentUser: Observable = this.currentUser$.asObservable().share();` you dont need to import anything – Jecfish Jan 14 '18 at 14:15
because `.share()` after `asObservable()` is coming together, you don't need to import anything to do so. – Jecfish Jan 14 '18 at 14:16
the usage of pipeable operators are using during piping. for example, `this.someStream$.pipe(share(....), switchMap(...))`. – Jecfish Jan 14 '18 at 14:17

score 0 · Answer 3 · answered Jan 14 '18 at 15:25

Your first way of importing import { share } from 'rxjs/operators' is wrong because that is just importing the share operator class not the method operator.

In the second example import 'rxjs/add/operator/share' this is correct because it is saying I would like to add the share operator to my observable.

There's also letable operators in rxjs 5.5 like Chybie says but for your use case number 2 is correct.

Having trouble calling RxJS share using the recommended operator import

3 Answers3

Related