React-Redux：操作必須是普通對象。使用自定義中間件進行異步操作

Question

未處理的拒絕（錯誤）：操作必須是普通對象。使用自定義中間件進行異步操作。

詳情：我想爲每個帖子添加評論。因此，當抓取帖子運行時，我想調用所有帖子的抓取評論API。

這裏是我的代碼：

export function bindComments(postId) { 
    return API.fetchComments(postId).then(comments => { 
    return { 
     type: BIND_COMMENTS, 
     comments, 
     postId 
    } 
    }) 
} 

感謝

Answer 1

您將在ansyc請求結束後發送。

這會工作：我已經使用

export function bindComments(postId) { 

return function (dispatch){ 
    return API.fetchComments(postId).then(comments => { 
    // dispatch 
    dispatch({ 
     type: BIND_COMMENTS, 
     comments, 
     postId 
    }) 
    }) 
} 
} 

Answer 2

不能使用在動作取不中間件。操作必須是普通對象。您可以使用像redux-thunk或redux-saga這樣的中間件來執行提取操作，然後分派另一個操作。

以下是使用redux-thunk中間件的異步操作示例。

export function checkUserLoggedIn (authCode) { 
let url = `${loginUrl}validate?auth_code=${authCode}`; 
    return dispatch => { 
    return fetch(url,{ 
     method: 'GET', 
     headers: { 
     "Content-Type": "application/json" 
     } 
     } 
    ) 
     .then((resp) => { 
     let json = resp.json(); 
     if (resp.status >= 200 && resp.status < 300) { 
      return json; 
     } else { 
      return json.then(Promise.reject.bind(Promise)); 
     } 
     }) 
     .then(
     json => { 
      if (json.result && (json.result.status === 'error')) { 
      dispatch(errorOccurred(json.result)); 
      dispatch(logOut()); 
      } 
      else{ 
      dispatch(verified(json.result)); 
      } 
     } 
    ) 
     .catch((error) => { 
     dispatch(warningOccurred(error, url)); 
     }) 
    } 
}