Redux-Router with immutable error

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

Kafo · Accepted Answer · 2016-09-04T23:08:30.303

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

Redux-Router with immutable error

1 Answers1