React：connect-react-router：在状态树中找不到路由器减速器，它必须安装在 "router" 下

Question

我在配置 connect-react-router 时遇到问题。我不断收到 Error: Could not find router reducer in state tree, it must be mounted under "router"。我正在使用 react、redux-toolkit、typescript 并使用这个 react template 作为基础。我已经看到与此错误相关的所有问题和答案并进行了尝试，但没有任何效果。我正在使用 history 和 version 4.10.1 这是我的代码，有人可以帮我指出问题出在哪里吗？

reducers.ts

/**
 * Combine all reducers in this file and export the combined reducers.
 */

import { combineReducers } from '@reduxjs/toolkit';
import { connectRouter } from 'connected-react-router';
import { InjectedReducersType } from 'utils/types/injector-typings';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();
/**
 * Merges the main reducer with the router state and dynamically injected reducers
 */
export function createReducer(injectedReducers: InjectedReducersType = {}) {
  // Initially we don't have any injectedReducers, so returning identity function to avoid the error
  if (Object.keys(injectedReducers).length === 0) {
    return state => state;
  } else {
    return combineReducers({
      router: connectRouter(history),
      ...injectedReducers,
    });
  }
}

export { history };

configureStore.ts

/**
 * Create the store with dynamic reducers
 */

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { createInjectorsEnhancer } from 'redux-injectors';
import createSagaMiddleware from 'redux-saga';
import { routerMiddleware } from 'connected-react-router';

import { createReducer, history } from './reducers';

export function configureAppStore() {
  const reduxSagaMonitorOptions = {};
  const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
  const connectedRouterMiddleware = routerMiddleware(history);
  const { run: runSaga } = sagaMiddleware;

  // Create the store with saga, router middleware
  const middlewares = [sagaMiddleware, connectedRouterMiddleware];

  const enhancers = [
    createInjectorsEnhancer({
      createReducer,
      runSaga,
    }),
  ];

  const customizedDefaultMiddleware = getDefaultMiddleware({
    serializableCheck: false,
  });

  return configureStore({
    reducer: createReducer(),
    middleware: [...customizedDefaultMiddleware, ...middlewares],
    devTools: process.env.NODE_ENV !== 'production',
    enhancers,
  });
}

在我的应用程序文件中，我通过 Provider 像这样使用它：

/**
 *
 * App
 *
 * This component is the skeleton around the actual pages, and should only
 * contain code that should be seen on all pages. (e.g. navigation bar)
 */

import * as React from 'react';

import {
  AppLayout,
  AppStyleProvider,
  AppThemeProvider,
  ContextProvider,
} from './@app';
import { ConnectedRouter } from 'connected-react-router';
import AuthRoutes from './@app/utility/AuthRoutes';
import { CssBaseline } from '@material-ui/core';
import { history } from '../store/reducers';
import { HelmetProvider } from 'react-helmet-async';
import { Provider } from 'react-redux';
import { configureAppStore } from '../store/configureStore';

const store = configureAppStore();

export function App() {
  return (
    <ContextProvider>
      <Provider store={store}>
        <AppThemeProvider>
          <AppStyleProvider>
            <ConnectedRouter history={history}>
              <AuthRoutes>
                <CssBaseline />
                <HelmetProvider>
                  <AppLayout />
                </HelmetProvider>
              </AuthRoutes>
            </ConnectedRouter>
          </AppStyleProvider>
        </AppThemeProvider>
      </Provider>
    </ContextProvider>
  );
}

我没有遇到任何编译错误，但是当我运行应用程序时，我得到 Error: Could not find router reducer in state tree, it must be mounted under "router"

Answer 1

老实说，这是一个非常奇怪的设置。您最初创建没有减速器的商店，并在事后将它们全部注入。

您的 createReducer() 函数被 configureAppStore() 调用，没有任何参数。发生这种情况时，您将返回一个没有所需 router 属性的减速器。为什么？您的应用程序将始终在没有 router reducer 的情况下进行初始化。

export function createReducer(injectedReducers: InjectedReducersType = {}) {
  // Initially we don't have any injectedReducers, so returning identity function to avoid the error
  if (Object.keys(injectedReducers).length === 0) {
    return (state) => state;
  } else {
    return combineReducers({
      router: connectRouter(history),
      ...injectedReducers
    });
  }
}

我通过删除此条件修复了错误。

export function createReducer(injectedReducers: InjectedReducersType = {}) {
  return combineReducers({
    router: connectRouter(history),
    ...injectedReducers
  });
}

React：connect-react-router：在状态树中找不到路由器减速器，它必须安装在 "router" 下

React: connect-react-router: Could not find router reducer in state tree, it must be mounted under "router"

typescript

reactjs

redux

redux-toolkit