Redux-Router with immutable error - reactjs

Question

I'm trying to implement this example to get my boilerplate router/redux/immutable working:
https://github.com/sjparsons/react-router-redux-immutable
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:
todos.js
import Immutable from 'immutable'
export default (state = Immutable.List(['Code More!']), action) => {
switch(action.type) {
case 'addTodo':
return state.push(action.todo)
default:
return state
}
}
router-reducer.js
/**
* 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 {
LOCATION_CHANGE
} 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:
redux-router-init.js
/* 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(
rootReducer,
initialState,
compose(
applyMiddleware(logger),
DevTools.instrument()
)
);
/* Create enhanced history object for router */
const createSelectLocationState = () => {
let prevRoutingState, prevRoutingStateJS;
return (state) => {
console.log(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:
index.js
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';
ReactDOM.render(
<Provider store={store}>
<div>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={Todos}/>
<Route path="/about" component={About}/>
<Route path="/todos" component={Todos}/>
</Route>
</Router>
{ DEVELOPMENT ? <DevTools/> : ''}
</div>
</Provider>,
document.getElementById('root')
);
The full app in its current state can be located here:
https://github.com/tim37123/my-boilerplate/tree/react-redux-devtools-immutable-router

Answer 1

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(),
});