1

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.

Redux-devtools image

Error image

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
lindern
  • 11
  • 2

0 Answers0