Search code examples
reactjsreduxredux-persistconnected-react-router

Redux-Persist and Connected-React-Router: TypeError: Cannot read property 'location' of undefined


I am trying to get React app to work properly with React Router and Redux, but I constantly getting TypeError: Cannot read property 'location' of undefined to any components that have redux. I am using connected-react-router lib to register router in the store but apparently I did something wrong

store/configureStore.js

import { createStore, applyMiddleware, compose } from 'redux';
import reducer from '../reducers';
import { persistStore } from 'redux-persist';
import { createBrowserHistory } from 'history';
import { routerMiddleware  } from "connected-react-router";

let _persistor;
let _store;

export const history = createBrowserHistory();

export const getStore = (props) => {
    if (_store) {
        return _store;
    }
    const initialState = (props) ? {...props} : {};
    _store = createStore(
        reducer,
        initialState,
        compose(
            applyMiddleware(routerMiddleware(history)),
            window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
        ),
    );

    _persistor = persistStore(_store);

    return _store;
};

export const getPersistor = () => {
    return _persistor;
};

reducers/index.js

import { combineReducers } from 'redux';
import { persistReducer } from 'redux-persist';
import Menu from './Menu';
import SelectedServices from './SelectedServices';
import { connectRouter } from 'connected-react-router'
import { history } from "../store/configureStore";

const rootReducer = (history) => combineReducers({
    router: connectRouter(history),
    menu: Menu,
    selectedServices: SelectedServices,
});

const reducer = persistReducer(
    {
        key: 'root',
        storage: require('localforage'),
        whitelist: [],
    },
    rootReducer(history),
);

export default reducer;

Solution

  • After three hours of debugging and reading more about each library of connected-react-router, react-redux, and react-router-dom I found one line which I skip several times, but eventually I checked it in my package.json. At current moment:

    v6.0.0 requires React v16.4.0 and React Redux v6.0. (It does not support React Redux v7.0 yet. We're looking into the compability issue.)

    I was using react-redux: v7.0.1 which a real facepalm to my self. So I downgraded to v6 and everything start works fine.