reactjs - redux-thunk 和处理调度结果中的异常

Question

我有一个改编自 Redux 文档的基本 thunk Action 创建器和 reducer :http://redux.js.org/docs/advanced/AsyncActions.html

// action creator

function fetchPosts () {
  return dispatch => {
    dispatch({ type: 'FETCH_POSTS_REQUEST' })

    return fetch('http://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => dispatch({ type: 'FETCH_POSTS_SUCCESS', items: json }))
      // THIS CATCHES FETCH REQUEST ERRORS, AND COMPONENT LEVEL ERRORS
      .catch(error => dispatch({ type: 'FETCH_POSTS_FAILURE', error: error.message }))
  }
}

// reducer

function reducer (state = { isFetching: false, items: [] }, action) {
  switch (action.type) {
    case 'FETCH_POSTS_REQUEST':
      return Object.assign({}, state, { isFetching: true })
    case 'FETCH_POSTS_SUCCESS':
      return Object.assign({}, state, { isFetching: false, items: action.items })
    case 'FETCH_POSTS_FAILURE':
      return Object.assign({}, state, { isFetching: false })
    default:
      return state
  }
}

在将状态作为 props 传递的 React 组件中，我检查是否存在帖子项，如果存在则强制组件级别错误:

const Test = props => {
  if (!props.items.length) return null
  throw new Error('Error!')
}

启动应用程序时:

1. fetchPosts 操作创建者被调用
2. 发出 HTTP 请求，并在响应后调度 FETCH_POSTS_SUCCESS 操作。
3. 组件现在使用状态中生成的项目进行更新，并尝试读取props.invalidProperty.error
4. 这会导致 JS 异常:无法读取未定义的属性“错误”

到目前为止一切顺利。

问题是组件的 JS 异常永远不会输出到控制台。相反，fetch Promise 的 catch() block 会捕获错误，并分派(dispatch) FETCH_POSTS_FAILURE 操作。

这具有吞掉受更新存储影响的组件中的所有错误的效果。分派(dispatch) FETCH_POSTS_FAILURE 状态更改，但这感觉不正确 - 实际获取帖子时没有错误，但使用这些帖子的组件下游出现错误。

我正在寻找一种模式来帮助将异步请求中的错误与通过调度更改状态而发生的任何其他随机错误分开。

<小时/>

编辑:

Redux github 存储库中的异步示例示例:https://github.com/nandastone/redux/commit/88ab48040ce41c39d8daba8cc0c13a6f32c38adf#diff-eeb827d44ad03655e63b7e9319a03dd4R6

Answer 1

Promise.catch 处理程序还捕获从解析或拒绝处理程序抛出的任何错误。

fetch('http://jsonplaceholder.typicode.com/posts').then(res => {
  throw new Error();
}).catch(err => {
  //will handle errors from both the fetch call and the error from the resolution handler
});

仅处理来自 fetch 的错误，并确保调用 dispatch({ type: 'FETCH_POSTS_SUCCESS', items: json }) 中抛出的任何错误解析处理程序未在 catch 处理程序中捕获，请将拒绝处理程序附加到 fetch。

return fetch('http://jsonplaceholder.typicode.com/posts').then(response => response.json, error => {
    dispatch({ type: 'FETCH_POSTS_FAILURE', error: error.message });
}).then(json => dispatch({ type: 'FETCH_POSTS_SUCCESS', items: json }), error => {
    //response body couldn't be parsed as JSON
});

fetch 不会将 >= 400 的状态代码视为错误，因此只有在出现网络或 CORS 错误时上述调用才会被拒绝，这就是为什么必须在解析处理程序。

function fetchHandler(res) {
  if (res.status >= 400 && res.status < 600) {
    return Promise.reject(res);
  }
  return res.json();
}



return fetch('http://jsonplaceholder.typicode.com/posts').then(fetchHandler, error => {
    //network error
    dispatch({ type: 'NETWORK_FAILURE', error });
}).then(json => dispatch({ type: 'FETCH_POSTS_SUCCESS', items: json }), error => {
    dispatch({ type: 'FETCH_POSTS_FAILURE', error: error.message });
});

请注意，React 组件中抛出的任何错误都可能使 React 处于不一致的状态，从而阻止后续的渲染并使应用程序无法响应 UI 事件。 React Fiber通过错误边界解决了这个问题。