Sequencing two actions together using an epic in redux-observable

Question

I am building an application with react-native using redux-observable. Right now I am struggling to do a simple decoration over two actions in redux-observable by using an epic. What I am trying to achieve is simply to map two actions to one.

The error I am getting is:

You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

Here is the code I am using:

import { Observable } from 'rx';

export const startApplicationEpic = (action$: Observable) =>
  action$
    .ofType('START_APPLICATION')
    .flatMap(() =>
      Observable.of(
        { type: 'REGISTER_PUSH_NOTIFICATIONS'},
        { type: 'AUTHENTICATION_REQUEST' }
      )
    );
    
// index.js

store.dispatch({ type: 'START_APPLICATION' })

To me the RxJS code I am using is valid, and if epics are a stream than this should work, or is it only possible to dispatch a single action from an epic?

Answer 1

It appears you're importing rx (which is v4) instead of rxjs (which is v5). So your code is providing a v4 Observable to the flatMap of a v5 Observable (redux-observable internals by default give you v5). The two versions cannot interop by default, but there are temporary interop layers. I admit this is all pretty confusing.

The best way to use v4 with redux-observable is to include the adapter we created for it redux-observable-adapter-rxjs-v4. If if you are using v4 on accident or it otherwise doesn't make a difference, definitely use v5 instead.

Once you fix that, the code as provided works as expected, without errors: https://jsbin.com/xiqigi/edit?js,console