TypeError: action$.ofType(...).mergeMap 不是函数答案

【问题标题】：TypeError: action$.ofType(...).mergeMap is not a functionTypeError: action$.ofType(...).mergeMap 不是函数
【发布时间】：2019-03-06 07:27:00
【问题描述】：

我是 reactjs 新手，正在尝试将 redux 与我现有的项目集成。

这是我在商店中的 index.js 文件

import 'rxjs'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { reducer as formReducer } from 'redux-form'
import thunk from 'redux-thunk'
import promise from 'redux-promise-middleware'
import { createEpicMiddleware, combineEpics } from 'redux-observable'

import user, { userEpic } from './user/duck'
import app from './app'

// Bundling Epics
const rootEpic = combineEpics(
    userEpic
)

// Creating Bundled Epic
const epicMiddleware = createEpicMiddleware(rootEpic)

// Define Middleware
const middleware = [
  thunk,
  promise(),
  epicMiddleware
]

// Define Reducers
const reducers = combineReducers({
  app,
  user,
  form: formReducer
})

// Create Store
export default createStore(reducers,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), applyMiddleware(...middleware))

这里是duck.js

const createUserEpic = (action$) =>
  action$
  .ofType(SIGNUP_CONCIERGE)
  .mergeMap((action) => {
    return Rx.Observable.fromPromise(api.signUpConcierge(action.payload))
    .flatMap((payload) => ([{
      type: SIGNUP_CONCIERGE_SUCCESS,
      payload
    }]))
    .catch((error) => Rx.Observable.of({
      type: SIGNUP_CONCIERGE_ERROR,
      payload: { error }
    }))
  })

export const userEpic = combineEpics(
  createUserEpic
)

这给我带来了错误TypeError: action$.ofType(...).mergeMap is not a function

自从我更新 react、react-redux、redux-observable 版本后，我一直收到此错误。

我在这里做错了什么？请帮忙！！！

【问题讨论】：

标签： reactjs react-redux redux-thunk redux-observable

【解决方案1】：

试试这个：

首先，在文件的最顶部导入这些函数

import { mergeMap } from 'rxjs/operators';
import { ofType } from 'redux-observable';

然后，像这样修复您的代码（请注意，ofType() 和 mergeMap() 由 comma 分隔，而不是 dot）：

const createUserEpic = action$ =>
  action$.pipe(  //fixed
    ofType(SIGNUP_CONCIERGE),
    mergeMap(action => {
      return Rx.Observable.fromPromise(api.signUpConcierge(action.payload))
        .flatMap(payload => [
          {
            type: SIGNUP_CONCIERGE_SUCCESS,
            payload
          }
        ])
        .catch(error =>
          Rx.Observable.of({
            type: SIGNUP_CONCIERGE_ERROR,
            payload: { error }
          })
        );
    })
  );

export const userEpic = combineEpics(createUserEpic);

您忘记了pipe() 方法，还从相应的包中导入了ofType 和mergeMap 方法。

导入这些方法后，要使用它们，首先需要像这样使用pipe() 方法：

 action$.pipe();

之后，您将能够使用ofType() 和mergeMap() 方法：

 action$.pipe(
     ofType(),
     mergeMap()
 );

请注意，它们由comma 分隔，而不是dot。

【讨论】：

我还是没听懂你。 ofType() 来自哪里？
谢谢哥们，你太棒了。我还有一个问题，但为此我肯定会问一个新问题。谢谢
你能看一下stackoverflow.com/questions/52222160/…
@DarkKnight 我已经通过示例和文档提供了完整的答案。

【解决方案2】：

根据this github issue，每个rxjs 运算符在使用前都应该包含在内。

人们建议您是否在index.js 文件上import rxjs（不是store/index.js，而是您的项目入口文件）。

或者您可以在您的duck.js 中添加import rxjs/add/operator/mergeMap。

无论哪种方式都可以，您可以选择哪种方式。

【讨论】：