Redux Dev Tools Chrome Extension Immutable.js Causes Error

Question

Currently, my redux setup (which utilizes Immutable.js for its state) functions completely as desired. However, the redux dev tools extension outputs the following error whenever the is opened:

An error occurred in the reducer TypeError: n.withMutations is not a function

For context, I'm using redux-immutable for its combine reducers function to, well, combine my react-router-redux reducer:

import { fromJS } from 'immutable';
import { LOCATION_CHANGE } from 'react-router-redux';

const initialState = fromJS({
  locationBeforeTransitions: null,
});

export default (state = initialState, action) => {
  if (action.type === LOCATION_CHANGE) {
    return state.merge({
      locationBeforeTransitions: action.payload,
    });
  }
  return state;
};

and my business logic reducers.

UPDATE: Building the production bundle w/ webpack, testing the app in production mode (in a docker container), and testing the app again in development mode (on the local machine w/o docker) seems to have solved the problem? Odd...

Answer 1

If you want to use react-router-redux, no need to implement the reducer your own, just import the routerReducer as key routing (important) from react-router-redux as below and combine with other reducers,

import { syncHistoryWithStore, routerReducer } from 'react-router-redux'
// Add the reducer to your store on the `routing` key
const store = createStore(
  combineReducers({
    ...reducers,
    routing: routerReducer
  })
)

//To Sync navigation events with the store
const history = syncHistoryWithStore(browserHistory, store)

ReactDOM.render(
  <Provider store={store}>
    { /* Tell the Router to use our enhanced history */ }
    <Router history={history}>
      <Route path="/" component={App}>
        <Route path="foo" component={Foo}/>
        <Route path="bar" component={Bar}/>
      </Route>
    </Router>
  </Provider>,
  document.getElementById('mount')
)

Hope this is what you are trying to implement