React, Immutable, fetch() - 정의되지 않은 상태 요소로 이어지는 잘못된 오류 처리?

Question

가 나는 오류가 발생을 이해 생각하지만 난) (가져 오기

내 메시지 감속기 모듈을 에서 반환 된 약속에 대한 올바른 처리 흐름을 해결할 수 있어요 : -

import { fetchMessages } from '_helpers/api' 
import { Map, fromJS } from 'immutable' 

const FETCHING_MESSAGES = 'FETCHING_MESSAGES' 
const FETCHING_MESSAGES_FAILURE = 'FETCHING_MESSAGES_FAILURE' 
const FETCHING_MESSAGES_SUCCESS = 'FETCHING_MESSAGES_SUCCESS' 
const ADD_MESSAGES = 'ADD_MESSAGES' 

const ERROR_MESSAGE = 'There has been an error' 

export const fetchAndHandleMessages =() => { 

    return (dispatch, getState) => { 

    dispatch(fetchingMessages()) 

    fetchMessages() 
     .then((r) => { 
     if (!r.ok) { 
      dispatch(fetchingMessagesFailure(ERROR_MESSAGE)) 
     }else{ 
      return r.json() 
     } 
     }) 
     .then((b) => { 
     dispatch(fetchingMessagesSuccess(b)) 
     }) 
     .catch(() => { 
     dispatch(fetchingMessagesFailure(ERROR_MESSAGE)) 
     }) 
    } 
} 

function fetchingMessagesSuccess(messages) { 
    return { 
    type: FETCHING_MESSAGES_SUCCESS, 
    messages, 
    lastUpdated: Date.now(), 
    } 
} 

function fetchingMessagesFailure(errMsg) { 
    return { 
    type: FETCHING_MESSAGES_FAILURE, 
    error: errMsg 
    } 
} 

const fetchingMessages =() => { 
    return { 
    type: FETCHING_MESSAGES, 
    } 
} 

const initialState = fromJS({ 
    messages: [], 
    isFetching: true, 
    error: '', 
}) 

export const messagesReducer = (state = initialState, action) => { 
    switch (action.type) { 
    case FETCHING_MESSAGES : 
     return state.merge({ 
     isFetching: true, 
     }) 
    case FETCHING_MESSAGES_SUCCESS : 
     return state.merge({ 
     error: '', 
     isFetching: false, 
     messages: action.messages 
     }) 
    case FETCHING_MESSAGES_FAILURE: 
     return state.merge({ 
     error: action.error, 
     isFetching: false 
     }) 
    default : 
     return state 
    } 
} 

export default messagesReducer 

fetchMessages()는 단순히 약속을 반환 -

export const fetchMessages =() => { 
    return fetch(baseUrl + 'messages') 
} 

문제와 관련이 없기 때문에 여기에 구성 요소 코드를 게시하지 않을 것입니다.

잘못된 URL로 fetchMessages()를 호출하면 404가 반환되므로 state.messages는 으로 정의되지 않습니다. 내 구성 요소에이 정의되지 않았습니다. 이 함수의이 부분에 의해 발생되는 것으로 보인다 것입니다 : -

 if (!r.ok) { 
      dispatch(fetchingMessagesFailure(ERROR_MESSAGE)) 
     }else{ 
      return r.json() 
     } 

내가 제대로 확인하고 반환 약속에 잠재적 인 오류를 처리하는 방법에 관한 혼동 될 수있다 생각합니다. fetch()에 대한 문서에 따르면 404는 (정규 AJAX와 달리) 오류로 간주되지 않으며 네트워크 문제 만 catch 유형의 오류로 간주됩니다.

누구든지 내 코드의이 부분에 어떤 문제가 있습니까? 내가 출구후 (fetchingMessagesFailure (ERROR_MESSAGE)) 후 다음을 사용 중지해야합니다 : .then()? 또한 단지 404 일지라도 .catch() 블록도 실행 중입니다. 이것은 문서가 제안한 것에 위배되는 것 같습니다.

도움을 주시면 감사하겠습니다. 감사.

Answer 1

난 당신이 !r.ok와 catch에 동일한 작업을 사용하는 ... 그래서 오류를 던지고 통해 !r.ok의 경우 체인을 깰 추천 할 것입니다 참조 :

fetchMessages() 
    .then((r) => { 
    if (!r.ok) { 
     throw true; // just go to .catch() 
    } 
    return r.json() 
    }) 
    .then((b) => dispatch(fetchingMessagesSuccess(b))) 
    .catch(() => dispatch(fetchingMessagesFailure(ERROR_MESSAGE)))