Redux中TypeError: middleware is not a function错误原因排查

我正在学习Redux，参照在线资源编写了如下逻辑，但运行时抛出如下错误：

/home/sssawant/Sarvesh/notes_fullstack/frontend/React_notes/redux_demo/node_modules/redux/dist/cjs/redux.cjs:407
const chain = middlewares.map((middleware) => middleware(middlewareAPI));

TypeError: middleware is not a function

at /home/sssawant/Sarvesh/notes_fullstack/frontend/React_notes/redux_demo/node_modules/redux/dist/cjs/redux.cjs:407:51
at Array.map ()
at /home/sssawant/Sarvesh/notes_fullstack/frontend/React_notes/redux_demo/node_modules/redux/dist/cjs/redux.cjs:407:31
at createStore (/home/sssawant/Sarvesh/notes_fullstack/frontend/React_notes/redux_demo/node_modules/redux/dist/cjs/redux.cjs:133:33)
at Object. (/home/sssawant/Sarvesh/notes_fullstack/frontend/React_notes/redux_demo/asyncActions2.js:79:15)
at Module._compile (node:internal/modules/cjs/loader:1376:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)

Node.js v20.11.0

依赖版本 #

Node版本 - v20.11.0
当前依赖：

├── axios@1.6.7
redux-logger@3.0.6
redux-thunk@3.1.0
redux@5.0.1

我的代码 #

const redux = require("redux");
const { thunk } = require("redux-thunk");
const createStore = redux.createStore;
const applyMiddleware = redux.applyMiddleware;
const thunkMiddleware = require("redux-thunk").default
const axios = require("axios");

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

const FETCH_USERS_REQUEST = "FETCH_USERS_REQUEST";
const FETCH_USERS_SUCCESS = "FETCH_USERS_SUCCESS";
const FETCH_USERS_FAILURE = "FETCH_USERS_FAILURE";

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

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

const fetchUsersFailure = (error) => {
  return {
    type: FETCH_USERS_FAILURE,
    payload: error,
  };
};

const reducer = (curState, action) => {
  switch (action.type) {
    case FETCH_USERS_REQUEST:
      return {
        ...curState,
        loading: true,
      };

    case FETCH_USERS_SUCCESS:
      return {
        ...curState,
        loading: false,
        users: action.payload,
        error: "",
      };

    case FETCH_USERS_FAILURE:
      return {
        ...curState,
        loading: false,
        users: [],
        error: action.payload,
      };
  }
};

const fetchUsers = () => {
  return function (dispatch) {
    dispatch(fetchUsersRequest());
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((rsponse) => {
        const users = response.data.map((user) => user.id);
        dispatch(fetchUsersSuccess(users));
      })
      .catch((error) => {
        dispatch(fetchUsersFailure(error.message));
      });
  };
};

const store = createStore(reducer, applyMiddleware(thunkMiddleware));
store.subscribe(() => {console.log(store.getState())});
store.dispatch(fetchUsers())

问题原因与修复方案 #

1. 核心错误：Redux-Thunk导入方式错误 #

你使用的Redux 5.x和Redux-Thunk 3.x版本，对中间件的导入规则有更新：

• 代码中同时混用了const { thunk } = require("redux-thunk");和const thunkMiddleware = require("redux-thunk").default，导致thunkMiddleware不是有效的中间件函数，传入applyMiddleware后触发middleware is not a function错误。

修复方式：
直接使用Redux-Thunk的命名导出即可，删除多余的default导入：

// 替换原导入代码
const redux = require("redux");
const { thunk } = require("redux-thunk");
const createStore = redux.createStore;
const applyMiddleware = redux.applyMiddleware;
const axios = require("axios");

// 创建store时传入thunk
const store = createStore(reducer, applyMiddleware(thunk));

2. 其他代码错误修复 #

• 参数名拼写错误：异步请求回调中参数写为rsponse，但后续使用response.data，会导致response is not defined错误，修正参数名：

axios
  .get("https://jsonplaceholder.typicode.com/users")
  .then((response) => { // 修正为response
    const users = response.data.map((user) => user.id);
    dispatch(fetchUsersSuccess(users));
  })

• Reducer初始状态缺失：Store初始化时curState为undefined，需要给reducer设置默认参数，同时添加default case返回当前状态：

const reducer = (curState = initialState, action) => { // 添加默认参数
  switch (action.type) {
    // 原有case逻辑
    default:
      return curState;
  }
};

总结 #

错误的核心是Redux-Thunk导入方式错误，导致无效的中间件传入，同时代码存在两处语法/逻辑问题，修正后即可正常运行。

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