I'm in the process of Refactoring clean Ract app to Redux.
I have deifned some actions and reducers tested.
I got stack on Router & History.
I'm getting error:
Uncaught TypeError: Cannot read property 'listen' of undefined at syncHistoryWithStore
from simple code:
//configureStore.jsx
import redux from 'redux';
import {buildingReducer, levelReducer, roomReducer} from 'reducers';
import {routerReducer} from 'react-router-redux';
export let configure = (initialState = {}) => {
let reducer = redux.combineReducers({
building: buildingReducer,
level: levelReducer,
room: roomReducer,
routing: routerReducer
});
let store = redux.createStore(reducer, initialState, redux.compose(
window.devToolsExtension ? window.devToolsExtension() : f => f));
return store;
};
&
//app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, browserHistory, hashHistory } from 'react-router';
import {Provider} from 'react-redux';
import {syncHistoryWithStore} from 'react-router-redux'
var actions = require('actions');
var store = require('configureStore').configure();
const history = syncHistoryWithStore(browserHistory, store);
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Route path="/" component={Main}>
<IndexRoute component={Map}/>
<Route path="report" component={Report}/>
<Route path="about" component={About}/>
</Route>
</Router>
</Provider>,
document.getElementById('react_app')
);
I'm out of any idea why this happens :(
I solved this issue by following this comment. This after I had updated to "react-router": "^4.1.1" and to "react-router-redux": "^4.0.8". This does solve the problem of using browserHistory from react-router but gives you a work around.
The work around requires you to:
import { createBrowserHistory } from 'history';
const history = syncHistoryWithStore(createBrowserHistory(), store);
The comments on the issue seem to suggest trying out different combinations of the 2 plugs. I tested the code by installing "react-router": "^3.0.2" and "react-router-redux": "^4.0.8" and that worked also.