1

这是我的商店.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;

根Saga.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();

应用程序.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;

当我单击某个链接来更改路线时,我看到,该路径在我的浏览器中发生了变化,也在 redux-devtools 中,但是组件没有切换,我得到一个错误,你可以在下面看到。我还在 Redux-devtools 中看到了路由器减速器。我不知道如何解决它。

Redux-devtools 镜像

错误图片

4

0 回答 0