Redux Toolkit集成connected-react-router报Actions must be plain objects错误如何解决

你遇到的Uncaught Error: Actions must be plain objects. Use custom middleware for async actions错误，核心原因是调用configureStore时直接覆写了middleware配置项，导致Redux Toolkit默认内置的thunk中间件丢失，无法处理异步action。

Redux Toolkit的configureStore默认会内置3类中间件：thunk（处理异步逻辑）、序列化检查中间件、不可变值检查中间件，如果你直接给middleware传自定义数组，会直接覆盖掉所有默认中间件。

优先选择保留默认中间件的配置方式，使用回调函数形式自定义中间件：

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,
  },
  // 接收getDefaultMiddleware方法，获取默认中间件数组后追加路由中间件
  middleware: (getDefaultMiddleware) => 
    getDefaultMiddleware().concat(routerMiddleware(history)),
});

如果确实需要完全自定义中间件（不推荐，会丢失开发环境的序列化、不可变值检查能力），可以手动把thunk加回中间件数组：

// Redux Toolkit本身已经依赖redux-thunk，不需要额外安装
import thunk from 'redux-thunk'

export const store = configureStore({
  reducer: {
    router: connectRouter(history),
    homepage: homePageSlice,
  },
  middleware: [thunk, routerMiddleware(history)],
});

• 修改配置后重启项目，触发之前报错的异步操作，确认报错是否消失
• 如果仍有报错，排查自定义action是否存在语法问题：比如是否把异步请求的Promise直接作为action返回、是否漏写了action的返回值

内容的提问来源于stack exchange，提问作者Gianmarco