redux-observable: typescript: pipe operator changes in rxjs 6.3.0 break ofType operator

After updating to rxjs 6.3.0 I got few epics failing when narrowing the action using the ofType operator.

export const loginEpic = (action$: ActionsObservable<LoginAction>) =>
  action$.pipe(
    // ofType<ILoginRequest>(LoginActionTypes.LOGIN_REQUEST), <-- TS COMPLAINING HERE
    filter(
      (action): action is ILoginRequest =>
        action.type === LoginActionTypes.LOGIN_REQUEST
    ),
    mergeMap(({ username, password }) =>
      getTokenAsync(username, password).pipe(
        mergeMap(token => [
          // Fire 2 actions, one after the other
          storeTokenAndTriggerLogingSucces(token),
          push("/")
        ]),
        catchError(error => of(loginError(error)))
      )
    )
  );

This is the error:

I was able to suppress the error using the rxjs filter operator as you can see on the code snip. I believe this is the change that breaks the ofType operator. https://github.com/ReactiveX/rxjs/pull/3945

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 15 (6 by maintainers)

Most upvoted comments

I am also having this issue with rxjs 6.3.3 and redux-observable 1. I specifically get the symbol.iterator missing when attempting to concatMap, mergeMap

irbrownie on Oct 31, 2018

Is it possible for someone to provide a complete reproduction, including all types, functions, variables, etc?

jayphelps on Sep 17, 2018

Almost a year later, but wanted to reply that @nzacca’s example was great, thank you! This turned out to be an issue with RxJS’s types. Can’t recall which version fixed this, but “it is now fixed”. Lmk if anyone here still experiences this.

jayphelps on Oct 19, 2019

So after a little bit of playing and pondering about the ofType typescript signature I was able to fix the issue defining T and R, where ofType<T extends Action, R extends T = T, K extends R['type'] = R['type']>(...key: K[]): (source: Observable<T>) => Observable<R>; as it follows:

export const pingEpic: Epic<Actions, PongAction> = action$ =>
  action$.pipe(
    ofType<Actions, PingAction>("PING"),
    // filter((action): action is PingAction => action.type === "PING"),
    delay(1000),
    map(() => pong())
  );

duvet86 on Sep 4, 2018