使用redux-thunk时遇TypeError: middleware is not a function问题求助

1. 检查redux-thunk的导入方式 #

redux-thunk的导入逻辑随版本变化：

• 若使用redux-thunk v2.x及以下，直接导入默认导出：

  import thunk from 'redux-thunk';
  // Node环境CommonJS写法：
  const thunk = require('redux-thunk');
  

• 若使用redux-thunk v3.x+（非Redux Toolkit的传统Redux场景），需导入命名导出的函数：

  import { thunk } from 'redux-thunk';
  // Node环境CommonJS写法：
  const { thunk } = require('redux-thunk');
  

误将v3+版本按v2方式导入，会导致拿到的是包含thunk的对象而非函数，直接触发报错。

2. 验证Store创建时的中间件配置 #

创建Store时，需确保thunk被正确传入applyMiddleware：
错误示例（v3+版本下的错误写法）：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk'; // 导入错误
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk) // 传入非函数值，触发报错
);

正确示例（v3+版本）：

import { createStore, applyMiddleware } from 'redux';
import { thunk } from 'redux-thunk';
import rootReducer from './reducers';

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

3. 检查依赖版本兼容性 #

执行命令查看当前依赖版本：

npm list redux-thunk redux

需保证版本匹配：

• redux-thunk v3.x要求redux v4.x及以上
• 若redux版本较低，可选择升级redux，或降级redux-thunk到兼容版本：

  npm install redux-thunk@2.4.2
  

4. 确认Node环境的模块语法 #

Node环境中注意区分CommonJS与ESModule：

• v3+版本用require时，必须解构获取thunk：

  const { thunk } = require('redux-thunk');
  

• v2.x版本直接require默认导出即可：

  const thunk = require('redux-thunk');
  

5. 排查代码中的其他误用 #

检查applyMiddleware的参数列表，确保所有传入值都是合法的中间件函数，避免混入对象、字符串等非函数值。

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