redux-immutable で react-router-redux を使用しようとしていますが、@@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>
);
}
}
routerReducer
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)
);
この問題の原因について何か考えはありますか?