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:

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

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