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の場合にチェーンを破るために推薦する...あなたは!r.okとcatchに同じアクションを使用している参照してください。

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)))