redux 工具包 +connected-react-router答案

【问题标题】：redux toolkit +connected-react-routerredux 工具包 +connected-react-router
【发布时间】：2021-11-22 13:42:10
【问题描述】：

我正在尝试使用 connected-react-router 设置 redux，但我并不真正了解如何做到这一点，我正在使用 create-react-app --template redux，但如果我尝试这样做我得到以下错误：Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.

   import { configureStore, combineReducers } from "@reduxjs/toolkit";
    import { connectRouter, routerMiddleware } from "connected-react-router";
    import { createBrowserHistory } from "history";
    import homePageSlice from "./reducers/homepage/homePageSlice";
    
    export const history = createBrowserHistory();
    
    
    export const store = configureStore({
      reducer: {
        router: connectRouter(history),
        homepage: homePageSlice,
      },
      middleware: [routerMiddleware(history)],
    });

【问题讨论】：

可能是homePageSlice，如果你注释掉那行，你还会得到错误吗？
实际上，如果我评论它，我不会再收到那个错误了，但是我怎么能包含 homePageSlice，它是来自 redux 工具包的一个切片，没有 connected-react-router 它工作正常
虽然这不是一个实际的答案，但我们建议反对今天尝试在 Redux 中保持路由状态。
@Gianmarco，这意味着您在 homePageSlice 中存在一些代码问题，然后粘贴您的定义。

标签： reactjs redux react-redux redux-toolkit

【解决方案1】：

设置中间件属性将覆盖 configureStore 注入的默认中间件。

【讨论】：

这个答案似乎太短了，如果您能解释得更多，可以添加示例或代码要点，那就太好了。 :)
@tim 他们的方式 OP 将一组中间件传递给 configureStore 覆盖了 redux-toolkit 的默认中间件。像这样设置middleware: 属性意味着您希望明确、完全控制所使用的中间件，而不需要任何默认值。这将踢出应用程序似乎依赖的 thunk 中间件（因此出现错误消息）。根据文档，保留默认中间件和添加您自己的官方方法是：middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(routerMiddleware(history)).