从 onEnter 调度操作时超出最大调用堆栈大小

【问题标题】：Maximum call stack size exceeded when dispatching an action from onEnter从 onEnter 调度操作时超出最大调用堆栈大小
【发布时间】：2016-12-21 09:54:40
【问题描述】：

我试图在进入页面时调度一个动作，但由于某种原因，它会导致被调度的动作无限循环。

这是我的代码：

 const routes = (store) => {
   const test = (nextState, replace, callback) => {
     Promise.resolve(store.dispatch({type: 'test'})).then(callback());
   };

   return (
     <Route path="/" component={App}>
       <IndexRoute component={LoginPage}/>
       <Route path="/home" component={HomePage} onEnter={test}/>
     </Route>
   );
 };

我尝试用简单的 console.log 替换调度，但没有发生。只有当我尝试从 onEnter 调度时

【问题讨论】：

标签： reactjs redux react-router

【解决方案1】：

原来是因为我使用的是 immutablejs 并且没有正确配置 react-router-redux。

我有：

const history = syncHistoryWithStore(browserHistory, store, { selectLocationState(state) {
    return state
      .get('routing')
      .toJS();
  }});

我现在改用：

const createSelectLocationState = () => {
  let prevRoutingState,
    prevRoutingStateJS;
  return (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(browserHistory, store, {selectLocationState: createSelectLocationState()});

它工作正常。

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

【讨论】：