反应路由器 Redux 不可变答案

【问题标题】：React Router Redux Immutable反应路由器 Redux 不可变
【发布时间】：2016-08-24 00:56:11
【问题描述】：

使用this 样板已经有一段时间了，并且一直使用普通的 JS 对象作为存储/状态，直到我开始随机获得一些奇怪的突变，所以决定切换到 Immutable.js。目前我正在尝试在我的代码中实现redux-immutable。我对 react-router-redux 和 redux-immutable 有一些问题；不幸的是，我对这些库“幕后”不太了解，因此在调试时遇到了很多麻烦。我已按照 redux-immutable README 中的说明进行操作。

在我的 index.js 文件中出现此错误。

未捕获的类型错误：无法读取未定义的属性“toJS”

index.js

const initialState = Immutable.Map({});

const store = configureStore(initialState);
const history = syncHistoryWithStore(hashHistory, store, {
  selectLocationState (state) {
    return state.getIn([
      'route',
      'location'
    ]).toJS();
  }
});

render(
  <Provider store={store}>
    <Router history={history} routes={routes} />
  </Provider>,
  document.getElementById('root')
);

configureStore.js

const router = routerMiddleware(hashHistory);

const enhancer = compose(
  applyMiddleware(thunk, router, logger),
  DevTools.instrument(),
  persistState(
    window.location.href.match(
      /[?&]debug_session=([^&]+)\b/
    )
  )
);

export default function configureStore(initialState) {
  const store = createStore(rootReducer, initialState, enhancer);

  if (module.hot) {
    module.hot.accept('../reducers', () =>
      store.replaceReducer(require('../reducers'))
    );
  }

  return store;
}

rootReducer.js

import {combineReducers} from 'redux-immutable';

import routing from './Routing';
import Graphing from './Graphing';
import Syncing from './Syncing';
import Navigating from './Navigating';
import Notifying from './Notifying';

const rootReducer = combineReducers({
  routing,
  Graphing,
  Navigating,
  Syncing,
  Notifying
});

export default rootReducer;

routing.js（路由缩减器）

import {LOCATION_CHANGE} from 'react-router-redux';

const initialState = Immutable.fromJS({
  location: {}
});

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

  return state;
};

【问题讨论】：

你能用return state.getIn([ 'routing', 'location' ]).toJS();代替return state.getIn([ 'route', 'location' ]).toJS();试试

标签： javascript reactjs redux immutable.js react-router-redux

【解决方案1】：

根据文档，建议使用 routing 作为减速键。所以在这里你基本上是在尝试使用密钥routing 而不是route 访问商店

我只是试了一下，没有不可变，如下，

const history = syncHistoryWithStore(browserHistory, store, {
  selectLocationState(state) {
    console.log(state.routing.locationBeforeTransitions);
    return state.routing;
  }
});

这将返回，

希望对你有帮助

【讨论】：