title: redux-observable: Actions must be plain objects. Use custom middleware for async actions
body: <p>I have a problem with my epic, please help me find out where I went wrong. Thank you!</p>
  
  <p>The following code leads me to the error:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>const loginEpic = (action$) =&gt;
    action$
      .ofType('LOGIN')
      .switchMap(() =&gt; {
        return Observable.fromPromise(loginService())
          .map((result) =&gt; {
            return Observable.of({
              payload: result,
              type: types.loginCompleted,
            });
          })
          .catch((error) =&gt; {
            return Observable.of({
              payload: error,
              type: types.loginFailed,
            });
          });
      });</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is my configureStore file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>const epicMiddleware = createEpicMiddleware(rootEpic);
  
  // Ref: https://redux-observable.js.org/docs/recipes/HotModuleReplacement.html
  if (module.hot) {
    module.hot.accept('./epic', () =&gt; {
      const nextEpic = require('./epic');
      epicMiddleware.replaceEpic(nextEpic);
    });
  }
  
  const configureStore = (): Store&lt;any&gt; =&gt; {
  
    const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(epicMiddleware)));
    if (module.hot) {
      module.hot.accept('./reducer', () =&gt; {
        const nextReducer = require('./reducer').default;
        store.replaceReducer(nextReducer);
      });
  
      return store;
    }
  };</code></pre>
  </div>
  </div>
  </p>