TypeError: action$.ofType(...).mergeMap is not a function

Question

I am new to reactjs and trying to integrate redux with my existing project.

This is my index.js file in store

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))

And here is 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
)

which throws me error TypeError: action$.ofType(...).mergeMap is not a function

I have been getting this error since I updated react, react-redux, redux-observable versions.

What I am doing wrong here? Please help!!!

Answer 1

Try this:

First, import these functions at the very top of your file

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

Then, fix your codes like this (notice that, ofType() and mergeMap() is seperated by a comma, not a 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);

You forgot the pipe() method and also importing ofType and mergeMap methods from the appropriate packages.

After importing those methods, in order to use them, you first need to use the pipe() method like this:

 action$.pipe();

After that, you'll be able to use the ofType() and mergeMap() methods:

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

Notice that they are separated by comma, not dot.

Answer 2

According to this github issue, every rxjs operator should be included before you use it.

And people suggest that whether you import rxjs on your index.js file (not a store/index.js but your project entry file).

or you can do import rxjs/add/operator/mergeMap in your duck.js.

Either way works and it's up to you which way to choose.