使用redux-thunk报错TypeError：middleware is not a function求助

使用Redux的applyMiddleware方法时，传入thunk后始终出现"middleware is not a function"错误，以下是相关代码及错误信息：

导入与初始状态代码 #

import Redux from 'redux'
const { createStore, applyMiddleware } = Redux;
import thunk from 'redux-thunk';

const initialState = {
    loading: false,
    users: [],
    error: '',   
}

const FETCH_USERS_REQUESTED = 'FETCH_USERS_REQUESTED'
const FETCH_USERS_SUCCEEDED = 'FETCH_USERS_SUCCEEDED'
const FETCH_USERS_FAILED = 'FETCH_USERS_FAILED'

Action Creators代码 #

const fetchUsersRequest = () =>{
    return{
        type: FETCH_USERS_REQUESTED,
    }
}

const fetchUsersSuccess = (users) =>{
    return{
        type: FETCH_USERS_SUCCEEDED,
        payload: users,
    }
}

const fetchUserFailure = (error) =>{
    return{
        type: FETCH_USERS_FAILED,
        payload: error,
    }
}

Reducer代码 #

const reducer = (state = initialState, action) =>{
    switch(action.type)
    {
        case FETCH_USERS_REQUESTED:
            return{
                ...state,
                loading: true,
            }
        case FETCH_USERS_SUCCEEDED:
            return{
                ...state,
                loading: false,
                users: action.payload,
                error: ''
            }
        case FETCH_USERS_FAILED:
            return{
                ...state,
                loading: false,
                users: [],
                error: action.payload,
            }
    }
}

创建Store的代码 #

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

错误信息 #

return middleware(middlewareAPI);
               ^

TypeError: middleware is not a function
    at D:\CDAC_2022\WPT\HarryReact\Codvelution-Redux\REDUX-DEMO\node_modules\redux\lib\redux.js:703:16
    at Array.map (<anonymous>)
    at D:\CDAC_2022\WPT\HarryReact\Codvelution-Redux\REDUX-DEMO\node_modules\redux\lib\redux.js:702:31
    at createStore (D:\CDAC_2022\WPT\HarryReact\Codvelution-Redux\REDUX-DEMO\node_modules\redux\lib\redux.js:162:33)
    at file:///D:/CDAC_2022/WPT/HarryReact/Codvelution-Redux/REDUX-DEMO/asyncActions.js:62:15
    at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async loadESM (node:internal/process/esm_loader:34:7)
    at async handleMainPromise (node:internal/run_main:66:12)

Node.js v20.9.0

问题原因与解决办法 #

核心原因 #

错误源于Redux Thunk版本的导出方式变化：v3.x开始使用ES模块命名导出，而非旧版本的默认导出；或是Redux与Redux Thunk版本不兼容。

具体解决步骤 #

1. 适配Redux Thunk v3.x+版本

如果安装的是最新版redux-thunk（v3.x及以上），需改用命名导入：

import Redux from 'redux'
const { createStore, applyMiddleware } = Redux;
// 改为命名导入
import { thunk } from 'redux-thunk';

// 创建store代码不变
const store = createStore(reducer, applyMiddleware(thunk));

2. 兼容Redux v5.x+版本

Redux v5.x及以上版本已内置Thunk中间件，无需单独安装redux-thunk，直接使用内置的thunk：

import { createStore, applyMiddleware, thunk } from 'redux';

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

3. 回退到旧版redux-thunk（不推荐）

若要继续使用默认导入方式，可安装v2.x版本的redux-thunk：

npm install redux-thunk@2.x

安装后你的原有导入代码即可正常工作，也可尝试删除node_modules和锁文件后重新安装依赖：

rm -rf node_modules package-lock.json
npm install

4. 推荐方案：使用Redux Toolkit

官方推荐用Redux Toolkit简化开发，它内置Thunk及其他常用中间件，无需手动配置：

import { configureStore } from '@reduxjs/toolkit';
import reducer from './reducer'; // 替换为你的reducer路径

const store = configureStore({
  reducer: reducer
});

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