redux-observable: Actions must be plain objects. Use custom middleware for async actions

Question

I have a problem with my epic, please help me find out where I went wrong. Thank you!

The following code leads me to the error:

const loginEpic = (action$) =>
  action$
    .ofType('LOGIN')
    .switchMap(() => {
      return Observable.fromPromise(loginService())
        .map((result) => {
          return Observable.of({
            payload: result,
            type: types.loginCompleted,
          });
        })
        .catch((error) => {
          return Observable.of({
            payload: error,
            type: types.loginFailed,
          });
        });
    });

And here is my configureStore file:

const epicMiddleware = createEpicMiddleware(rootEpic);

// Ref: https://redux-observable.js.org/docs/recipes/HotModuleReplacement.html
if (module.hot) {
  module.hot.accept('./epic', () => {
    const nextEpic = require('./epic');
    epicMiddleware.replaceEpic(nextEpic);
  });
}

const configureStore = (): Store<any> => {

  const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(epicMiddleware)));
  if (module.hot) {
    module.hot.accept('./reducer', () => {
      const nextReducer = require('./reducer').default;
      store.replaceReducer(nextReducer);
    });

    return store;
  }
};

Nikos Paraskevopoulos · Accepted Answer · 2017-05-31 15:35:00Z

3

I believe you must drop the Observable.of(...) from within the map() (EDIT - thanks to paulpdaniels: but not the catch()) method, because in this way you are returning an observable of observables - see the simplified code below:

Observable.fromPromise(...)
    .map(result => Observable.of(...))  // maps an object to an observable

The entire code should be:

const loginEpic = (action$) =>
  action$
    .ofType('LOGIN')
    .switchMap(() => {
      return Observable.fromPromise(loginService())
        .map((result) => {
          return {
            payload: result,
            type: types.loginCompleted,
          };
        })
        .catch((error) => {
          return Observable.of({
            payload: error,
            type: types.loginFailed,
          });
        });
    });

edited May 31, 2017 at 15:35

answered May 31, 2017 at 13:31

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

paulpdaniels Over a year ago

You overshot, correct to remove from map, but catch requires an Observable return.

Nikos Paraskevopoulos Over a year ago

@paulpdaniels Yes, absolutely right, thank you for the correction!

hxuanhung Over a year ago

Oh I didn't recognize it. Thank you ;)

hxuanhung Over a year ago

@paulpdaniels yes, in my case I fixed it like this:.catch((err: any, caught: Observable<any>) => { return Observable.of({ payload: err, type: types.loginFailed, }); }));

Kasra Over a year ago

not working for me. I am still getting the same error

Collectives™ on Stack Overflow

redux-observable: Actions must be plain objects. Use custom middleware for async actions

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related