TypeError：中间件不是函数，如何解决这个问题？

Question

这是我的代码：

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”、“redux-thunk”和“axios”的所有版本，更新了它，但仍然不起作用。然后我尝试重新安装节点包以确保我的代码正常工作并以 JSON 格式提供输出。但它不起作用，我不知道如何解决它

Answer 1

我确信您的

thunkMiddleware

已分配给

undefined

。根据 "redux-thunk" 文档，中间件在

thunk

属性下导出，因此，不要尝试从“redux-thunk”导入

default

，而是尝试将其替换为

thunk

。

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