Redux异步API调用报错：TypeError: middleware is not a function

问题原因 #

你遇到的错误是因为Redux 5.0.0与你使用的部分旧中间件版本不兼容：

• Redux 5.x重构了中间件API，要求中间件必须符合新的函数签名
• redux-promise@0.6.0和redux-logger@3.0.6都是停止维护的旧版本，仅支持Redux 4.x及更早版本，无法适配Redux 5的新API，导致被识别为非函数抛出错误。

解决方案 #

方案1：降级Redux到兼容版本 #

将Redux版本降级到4.x（比如^4.2.1），旧中间件可以正常工作：

1. 修改package.json中的依赖：

   "dependencies": {
     "axios": "^1.6.2",
     "immer": "^10.0.3",
     "redux": "^4.2.1",
     "redux-logger": "^3.0.6",
     "redux-promise": "^0.6.0",
     "redux-thunk": "^3.1.0"
   }
   

2. 重新安装依赖：

   npm install
   

方案2：使用Redux官方推荐的Redux Toolkit（推荐） #

Redux Toolkit是Redux官方的现代化封装，自动处理版本兼容、中间件配置等问题，同时内置了异步处理能力，无需依赖旧的第三方中间件：

1. 安装Redux Toolkit和axios：

   npm install @reduxjs/toolkit axios
   

2. 重构代码（替换旧的Redux写法）：

   const { configureStore, createSlice, createAsyncThunk } = require("@reduxjs/toolkit");
   const axios = require("axios");
   
   // 定义异步请求的thunk函数
   const fetchUsers = createAsyncThunk("users/fetchUsers", async () => {
     const response = await axios.get("你的用户API地址");
     return response.data;
   });
   
   // 创建状态切片，管理用户数据的状态
   const usersSlice = createSlice({
     name: "users",
     initialState: {
       list: [],
       loading: false,
       error: null
     },
     reducers: {},
     // 处理异步action的状态变化
     extraReducers: (builder) => {
       builder
         .addCase(fetchUsers.pending, (state) => {
           state.loading = true;
         })
         .addCase(fetchUsers.fulfilled, (state, action) => {
           state.loading = false;
           state.list = action.payload;
         })
         .addCase(fetchUsers.rejected, (state, action) => {
           state.loading = false;
           state.error = action.error.message;
         });
     }
   });
   
   // 配置并创建store
   const store = configureStore({
     reducer: {
       users: usersSlice.reducer
     }
     // 如果需要日志，可添加：middleware: (getDefault) => getDefault().concat(logger)
     // 注意需安装支持Redux 5的日志中间件，或使用RTK内置的开发工具
   });
   
   // 订阅状态更新
   store.subscribe(() => {
     console.log(store.getState());
   });
   
   // 触发异步请求
   store.dispatch(fetchUsers());
   

方案3：替换不兼容的中间件 #

如果坚持使用Redux 5.x原生写法，需要替换为支持新API的中间件：

• 移除redux-promise：用redux-thunk直接处理Promise请求，或者使用redux-promise-middleware的最新版本
• 替换redux-logger：使用@reduxjs/toolkit的getDefaultMiddleware自带的日志功能，或寻找支持Redux 5的日志中间件

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