redux-observable：动作必须简单objects。使用自定义中间件进行异步操作

Question

我的史诗有问题，请帮我找出哪里出错了。谢谢！

以下代码导致错误：

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,
          });
        });
    });

这是我的 configureStore 文件：

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;
  }
};

Answer 1

我认为您必须从 map() 中删除 Observable.of(...)（ 编辑 - 感谢 paulpdaniels： 但不是 catch()）方法，因为通过这种方式您将返回可观察对象的可观察对象 - 请参阅下面的简化代码：

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

整个代码应该是：

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,
          });
        });
    });

redux-observable：动作必须简单objects。使用自定义中间件进行异步操作

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

reactjs

redux

redux-observable