This is my store.ts
import { createStore, compose, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootSaga from 'sagas';
import rootReducer from 'reducers';
import { history } from 'common/helpers/historyHelper';
import { routerMiddleware } from 'connected-react-router';
declare global {
interface Window { // eslint-disable-line
__REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose; // eslint-disable-line
}
}
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const sagaMiddleware = createSagaMiddleware();
export const store = createStore(
rootReducer(),
composeEnhancers(applyMiddleware(sagaMiddleware, routerMiddleware(history)))
);
sagaMiddleware.run(rootSaga);
rootReducer.ts
import { history } from 'common/helpers/historyHelper';
import { combineReducers } from 'redux';
import user from 'scenes/Auth/reducers/user';
import { connectRouter } from 'connected-react-router';
const rootReducer = () => combineReducers({
router: connectRouter(history),
user
});
export default rootReducer;
rootSaga.ts
import authSaga from 'scenes/Auth/sagas';
import { all } from 'redux-saga/effects';
export default function* rootSaga() {
yield all([
authSaga()
]);
}
historyHelper.ts
import { createBrowserHistory } from 'history';
export const history = createBrowserHistory();
App.tsx
import React from 'react';
import { Provider } from 'react-redux';
import { store } from '../../store';
import { Page } from 'containers/Page';
import { history } from 'common/helpers/historyHelper';
import { ConnectedRouter } from 'connected-react-router';
const App = () => (
<Provider store={store}>
<ConnectedRouter history={history}>
<Page />
</ConnectedRouter>
</Provider>
);
export default App;
And when I click some link to change a route, I see, that path is changing in my browser, also in redux-devtools, but components don't switch and I get an error you can see below. I also see router reducer in Redux-devtools. I don't have any ideas how to fix it.