React，Immutable，fetch（） - 导致未定义状态元素的错误处理？

我想我明白其中发生了误差，但我能制定出一个无极从返回正确的处理流程取（）React，Immutable，fetch（） - 导致未定义状态元素的错误处理？

我的留言减少器模块： -

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将变为undefined在我的组件中。这似乎是由这部分功能原因造成的： -

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

我想我可能就如何正确检查和处理在返回的承诺潜在的错误混淆。根据fetch（）的文档，404不被认为是错误（与常规AJAX不同），只有网络问题被认为是catch（）类型的错误。

任何人都可以为我指出我的代码的这部分有什么问题吗？我应该使用退出后调度（fetchingMessagesFailure（ERROR_MESSAGE））停止以下。然后（）？此外，即使只有404，.catch（）块也正在运行。这似乎违背了文档的建议。

任何帮助非常感谢。谢谢。

来源

2017-10-20 U4EA

我看你使用的是相同的动作上!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)))

来源

2017-10-20 23:49:11 dhilt

完美！谢谢！ – U4EA

React，Immutable，fetch（） - 导致未定义状态元素的错误处理？

回答

相关问题