Redux-observable: Nested Observables don't have the `ofType` operator

Created on 19 Dec 2016 · 3Comments · Source: redux-observable/redux-observable

Some RxJS operators return an "observable of observables" like window. These nested Observables don't have the .ofType shortcut:

action$
  .window(action$.ofType('UI_USER_LOGIN_START'))
  .map(nested$ => {
    return nested$
      .ofType('UI_USER_LOGIN_FULFILLED') // Throw error "nested$.ofType is not a function"
      .mapTo('HIDE_LOADER');
  })
  .mergeAll();

action$
  .window(action$.ofType('UI_USER_LOGIN_START'))
  .map(nested$ => {
    return nested$
      .filter(action => (action.type === 'UI_USER_LOGIN_FULFILLED')) // Ok
      .mapTo('HIDE_LOADER');
  })
  .mergeAll();

Do you think there is something to do ?

I use:

redux-observable 0.12.2
rxjs 5.0.0-rc.1

Source

ncuillery

Most helpful comment

One way to work around lacking ofType is to create an ActionsObservable from nested$:

import { ActionsObservable } from 'redux-observable';

...
  .map(nested$ => {
    return new ActionsObservable(nested$)
      .ofType('UI_USER_LOGIN_FULFILLED') // Throw error "nested$.ofType is not a function"
      .mapTo('HIDE_LOADER');
  })
...

As you point out, you can also use filter, since ofType is only checking for type on the object.

Separately, do you mean to use mapTo({ type: 'HIDE_LOADER' })?

rgbkrk on 19 Dec 2016

👍2

All 3 comments

One way to work around lacking ofType is to create an ActionsObservable from nested$:

import { ActionsObservable } from 'redux-observable';

...
  .map(nested$ => {
    return new ActionsObservable(nested$)
      .ofType('UI_USER_LOGIN_FULFILLED') // Throw error "nested$.ofType is not a function"
      .mapTo('HIDE_LOADER');
  })
...

As you point out, you can also use filter, since ofType is only checking for type on the object.

Separately, do you mean to use mapTo({ type: 'HIDE_LOADER' })?

rgbkrk on 19 Dec 2016

👍2

The developer experience could be even better if we don't have to cast explicitly the nested observables to ActionsObservable, but the workaround looks good to me, thanks 👍

It's up to you to close this issue or not.

Separately, do you mean to use mapTo({ type: 'HIDE_LOADER' })?

Yes, totally 😄 (I copied-pasted the sample from my code and simplified it for comprehension purpose but I went to far)

ncuillery on 19 Dec 2016

😢 Thought this over and there's just no way for redux-observable to do anything about this. It's RxJS who isn't lifting (long story, if you're not familiar with what that means).

This is known and has been discussed but there's not a clear fix in sight and it's lower on our priority list (our backlog is huge). Going to close since this is being tracked upstream in RxJS and nothing we can do in redux-observable.