具有不可变错误的 Redux-Router

Question

我正在尝试实现此示例以使我的样板路由器/redux/immutable 正常工作：

https://github.com/sjparsons/react-router-redux-immutable

但是我遇到了一个错误，我在其他地方没有看到记录，我不知道该去哪里处理它。这是错误

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.

我也收到此错误，不确定一个是另一个的结果：

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

有我的减速器：

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;
};

这里是我初始化新商店和历史的地方：

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 }

这是我将它绑定到路由器的索引：

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')
);

当前状态下的完整应用可以在这里找到：

https://github.com/tim37123/my-boilerplate/tree/react-redux-devtools-immutable-router

Answer 1

我认为错误是因为这一行：

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

这是因为 immutable 应该有一个属性键的映射，而它给定的 List 是一个索引映射，因此错误显示为“0”。

换行

const initialState = Immutable.Map();

应该解决这个问题。

你也可以这样做：

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