TypeError: action $ .ofType (...). MergeMap не является функцией

Question

Я новичок в Reactionjs и пытаюсь интегрировать 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

Я получаю эту ошибку с тех пор, как я обновил реагировать, реагировать на редукцию, наблюдаем на редуксеверсии.

Что я здесь не так делаю?Пожалуйста, помогите !!!

Answer 1

Согласно этой проблеме github , каждый оператор rxjs должен быть включен перед его использованием.

И люди предполагают, что вы import rxjs в своем файле index.js (не store/index.js, а файл записи вашего проекта).

или вы можете сделать import rxjs/add/operator/mergeMap в вашем duck.js.

В любом случае работает, и вам решать, какой путь выбрать.

Answer 2

Попробуйте:

Сначала импортируйте эти функции в самый верх вашего файла

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.