Redux Thunk报错：Uncaught TypeError: middleware is not a function 求助

问题根源 #

你遇到的报错和代码被划掉的问题，本质是旧教程写法与当前Redux、React、React Router的新版本API不兼容：

1. createStore已被Redux官方废弃，推荐使用Redux Toolkit的configureStore
2. React 18+废弃了ReactDOM.render，改用createRoot
3. redux-thunk的导入逻辑与旧版applyMiddleware结合时易出现类型错误
4. React Router v6替换了Switch为Routes，并修改了路由组件的传入方式

最优解决方案：迁移到Redux Toolkit（官方推荐） #

Redux Toolkit是官方维护的工具集，自动集成redux-thunk、devTools等特性，彻底避免旧API的兼容问题。

1. 安装/升级依赖 #

如果还未安装Redux Toolkit，执行：

npm install @reduxjs/toolkit react-redux

2. 修改代码 #

替换你的完整代码为以下内容：

import React from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import reducers from "./reducers";

// 自动集成redux-thunk，无需手动导入
const store = configureStore({
  reducer: reducers,
});

import "./style/main.scss";

import Home from "./components/home";
import Results from "./components/results";

function main() {
  const rootElement = document.querySelector(".app-wrapper");
  const root = createRoot(rootElement);
  root.render(
    <Provider store={store}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/results" element={<Results />} />
        </Routes>
      </BrowserRouter>
    </Provider>
  );
}

document.addEventListener("DOMContentLoaded", main);

关键修改点说明 #

• configureStore替代createStore：
  自动处理中间件（默认包含redux-thunk）、devTools集成，无需手动调用applyMiddleware，彻底解决middleware is not a function错误。
• createRoot替代ReactDOM.render：
  适配React 18+的新渲染API，解决代码被划掉的问题。
• Routes替代Switch：
  React Router v6的新路由组件，同时将component属性改为element，传入JSX元素（如<Home />）而非组件引用。
• 无需单独导入redux-thunk：
  Redux Toolkit默认已包含redux-thunk，若需自定义中间件，可通过middleware配置项扩展：

  import thunk from 'redux-thunk';
  const store = configureStore({
    reducer: reducers,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk)
  });
  

若坚持使用旧Redux API（不推荐） #

如果一定要保留旧写法，需确保导入和store创建方式正确：

1. 正确导入redux-thunk：

   import thunk from 'redux-thunk'; // 使用默认导出，不要用命名导入`{thunk}`
   

2. 正确创建store：

   const store = createStore(reducers, applyMiddleware(thunk));
   

但注意createStore已被废弃，未来版本可能移除，不建议长期使用。

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