Redux Thunk + Axios「操作必須是普通對象，使用自定義中間件進行異步操作。」

Question

我一直在尋找類似的問題/解決方案在幾個小時的計算器，但他們都沒有解決我的問題。基本上我想設置Redux的咚，以使我的行爲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); 
    }); 
}; 

我一直有和沒有之前的「愛可信」 return語句試過，但我不斷收到以下錯誤：

"Actions must be plain objects. Use custom middleware for async actions."

我belieive我已經正確配置我的中間件：

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

Answer 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)) 
    } 
}; 

Answer 2

dispatch(loadUserSuccess(response.data.username)) 

• 你傳遞一個函數loadUserSuccess調度，所以loadUserSuccess必須返回一個對象。
• loadUserSuccess(response){ return {type:"success", payload:response} }
• 類似的東西。通過這個reducer將能夠知道哪個行動已被派遣。