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

You Nguyen · Accepted Answer · 2018-10-01T10:23:51.690

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.

Thanks buddy you are awesome. I have one more problem but for that I will surely ask a new question. Thank you — Dark Knight, Oct 01 '18 at 10:24
Can you please look it to that https://stackoverflow.com/questions/52222160/uncaught-typeerror-providing-your-root-epic-to-createepicmiddlewarerootepic — Dark Knight, Oct 01 '18 at 10:25
@DarkKnight I've provided a complete answer with example and document. — You Nguyen, Oct 01 '18 at 10:47

score 3 · Answer 2 · answered Oct 01 '18 at 08:12

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.

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

2 Answers2