Tim Lindsey Tim Lindsey - 3 months ago 53
React JSX Question

Redux-Router with immutable error

I'm trying to implement this example to get my boilerplate router/redux/immutable working:


However I'm coming across an error I don't see documented elsewhere and I'm not sure where to go with it. This is the error

combineReducers.js:29 Unexpected property "0" found in previous state received by the reducer. Expected to find one of the known reducer property names instead: "todos", "routing". Unexpected properties will be ignored.

I'm also receiving this error, not sure one is a result of the other:

redux-router-init.js:69 Uncaught TypeError: Cannot read property 'toJS' of undefined

There are my reducers:


import Immutable from 'immutable'
export default (state = Immutable.List(['Code More!']), action) => {
switch(action.type) {
case 'addTodo':
return state.push(action.todo)
return state


* A custom router reducer to support an Immutable store.
* See: https://github.com/gajus/redux-immutable#using-with-react-router-redux
import Immutable from 'immutable';
import {
} from 'react-router-redux';

const initialState = Immutable.fromJS({
locationBeforeTransitions: null

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

return state;

Here's where I initialize the new store and history:


/* External dependencies */
import { combineReducers } from 'redux-immutable';
import Immutable from 'immutable';
import { createStore, compose, applyMiddleware } from 'redux';
import { hashHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import createLogger from 'redux-logger';
import DevTools from './components/DevTools';

/* Internal dependencies */
import todoReducer from './reducers/todos';
import routerReducer from './reducers/router-reducer';


* Combine reducers into root reducer and create store.
* Note thate 'combineReducers' is a redux-immutable version
const rootReducer = combineReducers({
todos: todoReducer,
routing: routerReducer

const initialState = Immutable.List(['Code More!']);
const logger = createLogger();

const store = createStore(

/* Create enhanced history object for router */
const createSelectLocationState = () => {
let prevRoutingState, prevRoutingStateJS;
return (state) => {
const routingState = state.get('routing'); // or state.routing
if (typeof prevRoutingState === 'undefined' || prevRoutingState !== routingState) {
prevRoutingState = routingState;
prevRoutingStateJS = routingState.toJS();
return prevRoutingStateJS;

const history = syncHistoryWithStore(hashHistory, store, {
selectLocationState: createSelectLocationState()


/* Exports */
export { store, history }

And here is the index where I tie it into the router:


import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {Router, Route, IndexRoute, hashHistory} from 'react-router';
import App from './components/App';
import About from './components/About';
import Todos from './components/Todos';
import DevTools from './components/DevTools';
import {store, history} from './redux-router-init';

<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={Todos}/>
<Route path="/about" component={About}/>
<Route path="/todos" component={Todos}/>
{ DEVELOPMENT ? <DevTools/> : ''}

The full app in its current state can be located here:



I think the error happens because of this line:

const initialState = Immutable.List(['Code More!']);

It's because immutable is expected to have a mapping of property keys while it's given List which is an indexed mapping thus the error says '0'.

Changing the line to

const initialState = Immutable.Map();

should fix the issue.

You can also do this:

const initialState = Immutable.Map({
  todos: Immutable.List(),