如何修复Redux中TypeError: middleware is not a function错误？

问题描述 #

使用Redux和redux-thunk开发时触发TypeError: middleware is not a function错误，已尝试更新依赖、重装node_modules但问题未解决。

代码示例 #

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

// action type ( intention )
const AXIOS_USER_REQUEST = "AXIOS_USER_REQUEST";
const AXIOS_USER_SUCCESS = "AXIOS_USER_SUCCESS";
const AXIOS_USER_ERROR = "AXIOS_USER_ERROR";

// action object creator ( function that creates action object )
const fetchUsers = () => {
  return {
    type: AXIOS_USER_REQUEST,
  };
};
const fetchUsersSuccess = (users) => {
  return {
    type: AXIOS_USER_SUCCESS,
    payload: users,
  };
};
const fetchUsersError = (error) => {
  return {
    type: AXIOS_USER_ERROR,
    payload: error,
  };
};

// default state object
const intialState = {
  loading: false,
  users: [],
  error: "",
};

// reducer
const reducer = (state = intialState, action) => {
  switch (action.type) {
    case AXIOS_USER_REQUEST:
      return {
        ...state,
        loading: true,
      };
    case AXIOS_USER_SUCCESS:
      return {
        ...state,
        loading: false,
        users: action.payload,
      };
    case AXIOS_USER_ERROR:
      return {
        ...state,
        loading: false,
        error: action.payload,
      };
    default:
      return state;
  }
};
// thunk actions
const thunkFetchUsers = () => {
  return function (dispatch) {
    dispatch(fetchUsers());
  };
};
const thunkAjaxFetchUsersResponse = () => {
  return function (dispatch) {
    axios
      .get("https://reqres.in/vijay/vijay?page=1")
      .then((res) => dispatch(fetchUsersSuccess(res.data.data)))
      .catch((error) => dispatch(fetchUsersError(error.response.statusText)));
  };
};

// store
const store = createStore(reducer, applyMiddleware(thunkMiddleware));
console.log(store.getState());
console.log("********* subscribed  ********* ");
// subscribe
store.subscribe(() => {
  console.log(store.getState());
});
// dispatch
store.dispatch(thunkFetchUsers());
store.dispatch(thunkAjaxFetchUsersResponse());

报错信息 #

D:\Sadiq\Full Stack\ReactJS\day-11\plain-redux\node_modules\redux\dist\cjs\redux.cjs:407
    const chain = middlewares.map((middleware) => middleware(middlewareAPI));
                                                  ^

TypeError: middleware is not a function
    at D:\Sadiq\Full Stack\ReactJS\day-11\plain-redux\node_modules\redux\dist\cjs\redux.cjs:407:51
    at Array.map (<anonymous>)
    at D:\Sadiq\Full Stack\ReactJS\day-11\plain-redux\node_modules\redux\dist\cjs\redux.cjs:407:31
    at createStore (D:\Sadiq\Full Stack\ReactJS\day-11\plain-redux\node_modules\redux\dist\cjs\redux.cjs:133:33)
    at legacy_createStore (D:\Sadiq\Full Stack\ReactJS\day-11\plain-redux\node_modules\redux\dist\cjs\redux.cjs:258:10)
    at Object.<anonymous> (D:\Sadiq\Full Stack\ReactJS\day-11\plain-redux\step4.js:79:15)
    at Module._compile (node:internal/modules/cjs/loader:1368:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1426:10)
    at Module.load (node:internal/modules/cjs/loader:1205:32)
    at Module._load (node:internal/modules/cjs/loader:1021:12)

Node.js v21.7.1

解决方案 #

这个错误的核心原因是redux-thunk的导入方式不正确，导致thunkMiddleware不是一个合法的中间件函数。

修复步骤： #

1. 修正redux-thunk的导入语句
   把原来的：

   const thunkMiddleware = require("redux-thunk").default;
   

   改为：

   const thunkMiddleware = require("redux-thunk");
   

   原因：redux-thunk的CommonJS导出是直接导出中间件函数，不需要取.default属性，.default是ES模块导出的语法，在CommonJS环境下会导致拿到的是undefined或者非函数值，从而触发middleware is not a function错误。

2. 额外检查：修复API请求地址
   原代码中的axios请求地址https://reqres.in/vijay/vijay?page=1是无效的，会返回404，建议改为正确的接口https://reqres.in/api/users?page=1，避免后续错误处理逻辑异常。

修复后的完整代码 #

const redux = require("redux");
const thunkMiddleware = require("redux-thunk");
const axios = require("axios");
// -------------------------------
const createStore = redux.legacy_createStore;
const applyMiddleware = redux.applyMiddleware;

// action type ( intention )
const AXIOS_USER_REQUEST = "AXIOS_USER_REQUEST";
const AXIOS_USER_SUCCESS = "AXIOS_USER_SUCCESS";
const AXIOS_USER_ERROR = "AXIOS_USER_ERROR";

// action object creator ( function that creates action object )
const fetchUsers = () => {
  return {
    type: AXIOS_USER_REQUEST,
  };
};
const fetchUsersSuccess = (users) => {
  return {
    type: AXIOS_USER_SUCCESS,
    payload: users,
  };
};
const fetchUsersError = (error) => {
  return {
    type: AXIOS_USER_ERROR,
    payload: error,
  };
};

// default state object
const intialState = {
  loading: false,
  users: [],
  error: "",
};

// reducer
const reducer = (state = intialState, action) => {
  switch (action.type) {
    case AXIOS_USER_REQUEST:
      return {
        ...state,
        loading: true,
      };
    case AXIOS_USER_SUCCESS:
      return {
        ...state,
        loading: false,
        users: action.payload,
      };
    case AXIOS_USER_ERROR:
      return {
        ...state,
        loading: false,
        error: action.payload,
      };
    default:
      return state;
  }
};
// thunk actions
const thunkFetchUsers = () => {
  return function (dispatch) {
    dispatch(fetchUsers());
  };
};
const thunkAjaxFetchUsersResponse = () => {
  return function (dispatch) {
    axios
      .get("https://reqres.in/api/users?page=1")
      .then((res) => dispatch(fetchUsersSuccess(res.data.data)))
      .catch((error) => dispatch(fetchUsersError(error.response?.statusText || error.message)));
  };
};

// store
const store = createStore(reducer, applyMiddleware(thunkMiddleware));
console.log(store.getState());
console.log("********* subscribed  ********* ");
// subscribe
store.subscribe(() => {
  console.log(store.getState());
});
// dispatch
store.dispatch(thunkFetchUsers());
store.dispatch(thunkAjaxFetchUsersResponse());

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