TypeError: action$.ofType(..).合并映射不是一个函数

Question

我是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错误

自从我更新了反应，反应-reux，reux-observable版本以来，我一直收到此错误。

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

Answer 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分隔的。

Answer 2

根据这个 github 问题，在使用它之前应该包括每个rxjs运算符。

人们建议你是否import rxjs你的index.js文件(不是store/index.js而是你的项目入口文件(。

或者你可以在你的duck.js做import rxjs/add/operator/mergeMap.

无论哪种方式都有效，由您选择哪种方式。