React-Redux : 작업은 일반 개체 여야합니다. 비동기 작업에 사용자 지정 미들웨어 사용

Question

처리되지 않은 거부 (오류) : 작업은 일반 개체 여야합니다. 비동기 작업에는 사용자 지정 미들웨어를 사용하십시오.

세부 정보 : 모든 게시물과 함께 의견을 추가하고 싶습니다. 그래서 게시물을 가져올 때 나는 모든 게시물에 대해 fetch comment 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)); 
     }) 
    } 
}