Platform: RxJS Lettable Operators

[phillipzada]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[x] Documentation issue or request

What is the current behavior?

No examples using the lettable operators in example or documentation for effects
https://github.com/ReactiveX/rxjs/blob/master/doc/lettable-operators.md

Expected behavior:

Documentation and example app to be updated

Minimal reproduction of the problem with instructions:

N/A

Version of affected browser(s),operating system(s), npm, node and ngrx:

N/A

Other information:

Would like to submit a PR to show in one effect and documentation how to utilise Lettable Operators

[MattiJarvinen]

For those who need this "now".

// rxjs
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { 
  catchError,
  debounceTime, 
  distinctUntilChanged,
  map, 
  skip, 
  switchMap, 
  takeUntil,
} from 'rxjs/operators';

// @ngrx/platform
import { Actions, Effect, toPayload } from '@ngrx/effects';
import { Action, Store } from '@ngrx/store';

// application 
import {
  DistrictActionType,
  LoadDistrictsAction,
  SearchDistrictErrorAction
} from '../actions/district';
import { DistrictService } from '../services/district.service';
import { District } from '../models/district';

@Injectable()
export class DistrictEffects {

  @Effect()
  public search$: Observable<Action> = this.actions$
    .ofType(DistrictActionType.SEARCH_DISTRICT) // event type to listen
    .pipe(
    // wait 300 ms for additional changes to occur
    debounceTime(300),
    distinctUntilChanged(),
    // just the payload
    map(toPayload),
    switchMap(query => {

      if (query) {
        console.warn('District search not implemented');
      }

      const nextSearch$ = this.actions$.ofType(DistrictActionType.SEARCH_DISTRICT).skip(1);

      return this.districtService.list()
        .pipe(
        takeUntil(nextSearch$),
        map((districts: District[]) => {
          return new LoadDistrictsAction(districts);
        }),
        catchError((err: any) => {
          console.log('err in effect UserEffects', err);
          return of(new SearchDistrictErrorAction(err))
        })
        );
    }),
  );
  constructor(
    private actions$: Actions,
    private districtService: DistrictService,
  ) { }
}

[MattiJarvinen]

For readers of my previous example.

Currently there is an angular-cli issue realted to Rxjs/operators import:
bug: all RxJS operators pulled into prod bundle when using lettable imports from 'rxjs/operators'
https://github.com/angular/angular-cli/issues/9069#issuecomment-355604779

This is related to:

• RxJS not marked as side effect free https://github.com/ReactiveX/rxjs/issues/3212
• Angular cli use Webpack 4 https://github.com/angular/angular-cli/pull/8611

Workaround based on comments might be to use deep imports like 'rxjs/operators/catchError'.