Question

在一个地方调用动作创建者时如何处理（自动调度）服务器错误？

获取数据：

fetch(url).then(resp => resp.json()).then(data => dispatch({
  type: 'GET_DATA',
  payload: data
}))

它可以在组件中：

fetchData() {
  this.props.fetchData().catch(err => {
    // handle this error in root component and delete cookie, logout
    if (err.status === 403) { this.props.setError(err) }

    // handling errors by component
  })
}

但是通过这个例子，它必须在所有方法中都重复：

catch(err => {
        // handle this error in root component and delete cookie, logout
        if (err.status === 403) { this.props.setError(err) }

        // handling errors by component
      })

或者在行动创作者中：

fetch(url).then(resp => resp.json()).then(data => dispatch({
  type: 'GET_DATA',
  payload: data
}))
.catch(err => {
    if (err.status === 403) {
      // handle this error in root component and delete cookie, logout
      dispatch({ type: 'SET_ERROR', payload: err })
    }
  })

但是，每个动作创建者也必须复制此检查：

.catch(err => {
        if (err.status === 403) {
          // handle this error in root component and delete cookie, logout
          dispatch({ type: 'SET_ERROR', payload: err })
        }
      })

那么，如何处理服务器错误并在没有重复代码的情况下将其发送到一个地方？

Answer 1

我建议你将所有异步调用和逻辑移到redux动作创建器中。
话虽如此，你可以声明一个辅助函数（在/utils或/helpers文件夹中），它可以像你的错误处理程序一样：

function errorHandler(err, dispatch) {
   if (err.status === 403) {
      // handle this error in root component and delete cookie, logout
      dispatch({ type: 'SET_ERROR', payload: err })
    }
}

并传递此函数对.catch方法的引用：

.catch(err => errorHandler(err, dispatch))

使用fetch处理React，redux，react-router v4应用程序中的（自动调度）服务器错误

1 个答案: