Redux Thunk + Axios “操作必须是普通对象。使用自定义中间件进行异步操作。”

Posted 2023-02-22

【中文标题】Redux Thunk + Axios “操作必须是普通对象。使用自定义中间件进行异步操作。”

【英文标题】：Redux Thunk + Axios "Actions must be plain objects. Use custom middleware for async actions."

【发布时间】：2017-11-16 00:26:15

【问题描述】：

我已经在 *** 上查看了几个小时的类似问题/解决方案，但似乎都没有解决我的问题。基本上我正在尝试设置 Redux Thunk，以便在我的操作中进行 API 调用，如下所示：

export function loadUserInfo()
    return function(dispatch)
        return axios.get('/api/auth/GetUsername', config).then(response=>
        dispatch(loadUserSuccess(response.data.username));
    ).catch(function(error)
        throw(error);
    );
;

我尝试过在“axios”之前使用和不使用 return 语句，但是我不断收到以下错误：

“操作必须是普通对象。使用自定义中间件进行异步操作。”

我相信我已经正确配置了我的中间件：

export default function configureStore(initialState)
    return createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk, reduxImmutableStateInvariant())
); 

【参考方案1】：

我相信您的问题在于格式；您正试图在返回的 thunk 上捕获失败的承诺。

export function loadUserInfo()
    return dispatch => 
        return axios.get('/api/auth/GetUsername', config)
            .then(response => dispatch(loadUserSuccess(response.data.username)))
            .catch(error => throw(error))
    
;

【参考方案2】：

dispatch(loadUserSuccess(response.data.username))

你正在传递一个函数 loadUserSuccess 来调度，所以 loadUserSuccess 必须返回一个对象。 loadUserSuccess(response) return type:"success", payload:response 类似的东西。通过这个reducer 将能够知道哪个动作已经被调度。