redux-observable：操作必须是普通对象。使用自定义中间件进行异步操作

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