reactjs - React-router-redux 和 redux-immutable : You cannot change <Router history>; it will be ignored

Question

我尝试将react-router-redux与redux-immutable结合使用，但在触发@@router/LOCATION_CHANGE操作时收到错误:

action @ 14:19:07.625 @@router/LOCATION_CHANGE 
%c prev state color: #9E9E9E; font-weight: bold Map { "repos": Map { "loading": false, "reposCount": 0 }, "users": Map { "loading": false, "usersCount": 0 }, "router": Map { "locationBeforeTransitions": null } }
%c action color: #03A9F4; font-weight: bold { type: '@@router/LOCATION_CHANGE',
  payload: 
   { pathname: 'blank',
     search: '',
     hash: '',
     state: null,
     action: 'POP',
     key: '5b05pd',
     query: {},
     '$searchBase': { search: '', searchBase: '' } } }
%c next state color: #4CAF50; font-weight: bold Map { "repos": Map { "loading": false, "reposCount": 0 }, "users": Map { "loading": false, "usersCount": 0 }, "router": Map { "locationBeforeTransitions": Map { "pathname": "blank", "search": "", "hash": "", "state": null, "action": "POP", "key": "5b05pd", "query": Map {}, "$searchBase": Map { "search": "", "searchBase": "" } } } }
—— log end ——
<Provider> does not support changing `store` on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.
Warning: [react-router] You cannot change <Router history>; it will be ignored

我一直在网上阅读这个问题似乎是由热加载器引起的，但我没有使用它。

代码如下所示:

路线

const routes = (
    <Route path="/" component={AppLayout}>
        <IndexRoute component={Home} />
        <Route path="/users" component={UsersPage} />
        <Route path="/repos" component={ReposPage} />
    </Route>
);

根组件

class Root extends React.Component<RootComponentProps, void> {
  public render() {
    const { store, history, routes } = this.props;
    return (
      <Provider store={store}>
        <div>
          <Router history={history}>
            {routes}
          </Router>
          <DevTools />
        </div>
      </Provider>
    );
  }
}

路由器 reducer

const initialRouterReducerState = Immutable.fromJS({
    locationBeforeTransitions: null
});

let routerReducer = (state = initialRouterReducerState, action: any) => {
    if (action.type === LOCATION_CHANGE) {
        return state.merge({
            locationBeforeTransitions: action.payload
        });
    }
    return state;
};

主要

// ...

let history = syncHistoryWithStore(browserHistory, store, {
    selectLocationState: (state: any) => state.get("routing").toJS()
});

render(
    <Root store={store} history={history} routes={routes} />,
    document.getElementById(container)
);

您对导致此问题的原因有什么想法吗？

Answer 1

让我们在这里阅读错误:

<Provider> does not support changing store on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.

在你的根组件中，你从 props 中获取 store ，并且在每次路由更改时，它都会重新渲染所有内容。

https://github.com/reactjs/react-redux/blob/master/docs/api.md#react-router-10

Provider 应呈现为顶级组件。路线将正确更改并传递 Prop ，而提供者将通过单个商店传递所有内容。

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>...</Router>
  </Provider>,
  targetEl
)

提供商应位于顶部，与您的商店一起。你应该有许多不同的 reducer 。