提前注意：
有一个与connected-react-router.
为了让您的设置正常工作，请确保安装history v4.10.1- 较新的版本会导致错误：
https://github.com/supasate/connected-react-router/issues/312#issuecomment-647082777
1. 中间件更新
将redux-dev-tools与redux-thunk已经包含在终极版的工具包。
如果您需要导入额外的中间件，您可以使用getDefaultMiddleware.
如果您想添加一些自定义中间件，但仍希望添加默认中间件，则 getDefaultMiddleware 很有用：
因此，考虑到这一点，您可以redux-thunk从package.json.
2. 移除redux进口
您不再需要 import createStore, compose, applyMiddleware, combineReducersfrom redux。所有这些都是中内部处理configureStore提供API @reduxjs/toolkit。
您也可以redux从package.json.
3. 将 args 应用到configureStorefrom @reduxjs/toolkit。
更新后的商店可能如下所示：
// IMPORTANT: be sure to install history v4.10.1
// see open issue: https://github.com/supasate/connected-react-router/issues/312#issuecomment-647082777
import { createBrowserHistory, History } from "history";
import { configureStore } from "@reduxjs/toolkit";
import {
routerMiddleware,
connectRouter,
RouterState
} from "connected-react-router";
import selectionReducer from "./reducers/selection";
import articlesReducer from "./reducers/articles";
import todosReducer, { I_TodoState } from "./reducers/todos";
export const history = createBrowserHistory();
// combineReducers will be handled internally by configureStore
const rootReducer = (history: History<any>) => ({
articles: articlesReducer,
selection: selectionReducer,
todos: todosReducer,
router: connectRouter(history)
});
const preloadedState = {};
export const store = configureStore({
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(routerMiddleware(history)),
reducer: rootReducer(history),
preloadedState
});
如果您将对象传递给reducer参数 in configureStore，则减速器将被组合。所以你不再需要做一个rootReducerwithcombineReducers
这是一个演示链接。
更新
我想指出，从您最初的帖子中，您似乎只有 3 个中间件：
__REDUX_DEVTOOLS_EXTENSION_COMPOSE__、thunk、 和routerMiddleware。
您看到的错误发生是因为@redux/toolkit它为正确的不变性和状态的序列化提供了额外的保护。它通过包含redux-immutable-state-invariant在其默认中间件中来实现。
您之前的设置没有此中间件，这就是您现在只看到这些错误的原因。如果您已redux-immutable-state-invariant安装，您会在之前的设置中看到这些错误。
要实现与之前相同的设置，您不需要包含defaultMiddleware，但是通过您的减速器并了解为什么您的状态不是不可变和/或可序列化的，这将是一个非常好的主意。
这是一个与你之前相同的设置，只有 @redux/toolkit
import { configureStore } from '@reduxjs/toolkit';
import { routerMiddleware, connectRouter } from 'connected-react-router';
import { createBrowserHistory } from 'history';
import thunk from 'redux-thunk';
import { rootReducer } from './reducer';
export const history = createBrowserHistory();
// combineReducers will be handled internally by configureStore
const rootReducer = (history) => ({
articles: articlesReducer,
selection: selectionReducer,
router: connectRouter(history)
});
const preloadedState = {};
export const store = configureStore({
middleware: [thunk, routerMiddleware(history)],
reducer: rootReducer(history),
preloadedState,
});
看起来开发工具已经配置好了：https://redux-toolkit.js.org/usage/usage-guide#store-setup，所以我没有在这里添加它们。您应该仍然可以在浏览器的开发人员工具中使用它们。
您应该研究为什么您当前的状态不是不可变/可序列化的。您的状态中可能存在循环引用，或者您的状态在某处直接发生变异。这可能会导致一些令人讨厌的错误，因为 redux 只有在状态不可变的情况下才真正有效。
但是，您仍然可以在当前设置中使用 @redux/toolkit。