Redux出现TypeError: middleware is not a function报错的解决求助

自学Redux时跟着网上教程编写异步请求代码，多数逻辑能理解，但运行后出现TypeError: middleware is not a function错误，代码和报错信息如下：

代码示例 #

const redux = require('redux')
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 = (state = initialState, action) => {
    switch (action.type) {
        case FETCH_USERS_REQUEST:
            return {
                ...state,
                loading: true
            }

        case FETCH_USERS_SUCCESS:
            return {
                loading: false,
                users: action.payload,
                error: ''
            }

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

const fetchUsers = () => {
    return function (dispatch) {
        dispatch(fetchUsersRequest())
        axios.get('https://jsonplaceholder.typicode.com/users')
            .then(response => {
                // response.data is the array of users
                const users = response.data.map(user => user.id)
                dispatch(fetchUsersSuccess(users))
            })
            .catch(error => {
                // error.message is the error description
                dispatch(fetchUsersFailure(error.message))
            })
    }
}

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

报错信息 #

TypeError: middleware is not a function
    at E:\Repos\Redux\Raw\node_modules\redux\dist\cjs\redux.cjs:407:51
    at Array.map (<anonymous>)
    at E:\Repos\Redux\Raw\node_modules\redux\dist\cjs\redux.cjs:407:31
    at createStore (E:\Repos\Redux\Raw\node_modules\redux\dist\cjs\redux.cjs:133:33)
    at Object.<anonymous> (E:\Repos\Redux\Raw\asyncActions.js:78:15)
    at Module._compile (node:internal/modules/cjs/loader:1369:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)

问题排查与修复 #

• 错误原因：Redux Thunk的导入方式错误。在Node.js的CommonJS环境中，redux-thunk包已直接导出中间件函数，无需额外添加.default。当前导入方式会导致thunkMiddleware值为undefined，而applyMiddleware要求传入的必须是函数类型的中间件，因此触发报错。
• 修复方式：修改Thunk的导入语句，移除.default：

  const thunkMiddleware = require('redux-thunk')
  

• 验证说明：代码中的reducer、action创建函数、异步请求逻辑均正确，仅修正导入语句后即可正常执行，控制台会依次打印请求中、请求成功后的状态。

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