CODEWITHSUNDEEP
angularreduxrxjs
Hasholef
Hasholef

Reputation: 753

How to use rxjs 5.5.2 imports

I don't understand how to RXjs operators should be imported.

Take a look at this simple code.

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounce';

ngOnInit() {
    const temp_observable = this.store.select(state => state.accounts.pendingRequests)
      .filter(x => !!x)
      .map(x => x +1 )
      .debounce(x => Observable.timer(300));
}

But I keep getting:

ERROR TypeError: this.store.select(...).filter(...).map(...).debounce is not a function

The same thing happens when I use the import:

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

But, If I change my code to use the Observable.of, it works-

const temp_observable = Observable.of(this.store.select(state => state.accounts.pendingRequests))

Is there a simpler way to solve this? Can I import the common operators in the main.ts and not worry about it for each .ts file?

rxjs 5.5.2 angular 5.0.3 angular-redux 6.0.1 node 8.9.1

Upvotes: 1

Views: 667

Answers (1)

Joseph King
Joseph King

Reputation: 5227

The usage recommendations have changed somewhat since the introduction of the pipeable (previously lettable) operators. Try this code snippet -

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

ngOnInit() {
  const temp_observable = this
    .store.select(state => state.accounts.pendingRequests)
    .pipe(
      filter(x => !!x),
      map(x => x +1 ),
      debounce(x => Observable.timer(300))
    );
}

Hope this helps.

Upvotes: 3

Related Questions