如何在 Redux 中创建全局错误处理程序并在需要时覆盖它

How to make a global error handler in Redux and override it when needed?

本文关键字：覆盖 程序 错误 Redux 创建 全局 处理      更新时间：2023-09-26

想象一下处理表单提交的情况，它可以返回不同的错误：400、401、500。返回 400 时，我想在表单顶部显示一条消息(覆盖默认行为(。对于其他(未处理的(错误代码，应调用默认(全局(错误处理程序(显示通知 Toast(。只是不想为每个操作复制此代码

我使用 redux-thunk 中间件调度异步操作

// Pseudo code
const action = (dispatch) => {
    const onSuccess = (result) => dispatch({type: 'OPERATION_SUCCESS', payload: result});
    const onError = (error) => dispatch({type: 'OPERATION_ERROR', error: true, payload: error});
    return promise.then(onSuccess, onError);
};
dispatch(action);

我可以创建一个化简器来处理所有 {error： true} 操作并显示一些弹出通知(可能不使用 redux 状态，直接调用一些 toast.show(( 方法(但是如何确定这个特殊错误是否已经由其他减速器处理过呢？

当一个动作到达减速器时，这是一个事实。它反映了已经发生的事情。问"其他化简器是否处理了这个动作？"是没有意义的，因为化简器应该是被动的，在一般意义上，不知道彼此的存在。在可能的情况下，他们应该努力保持独立。

没有一种"真正"的方法来完成你想要的，但是由于你已经使用了将任何具有error属性的对象视为全局错误的约定，你不妨引入另一个约定，比如"如果操作有一个suppressGlobalErrorNotification标志，那么全局降错器不应该关心它"。

// utilities
function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response
  } else {
    const error = new Error(response.statusText)
    error.response = response
    throw error
  }
}
function parseJSON(response) {
  return response.json()
}
export function post(url, data) {
  const options = {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)  
  }
  return fetch(url, options)
    .then(checkStatus)
    .then(parseJSON)
}
// action creators
import { post } from './utils'
export function submitForm(data) {
  return dispatch => post('/myform', data).then(
    response => dispatch({
      type: 'SUBMIT_FORM_SUCCESS',
      payload: response
    }),
    error => dispatch({
      type: 'SUBMIT_FORM_FAILURE',
      error: error,
      suppressGlobalErrorNotification: (
        error.response &&
        error.response.status === 400
      )
    })
  )
}
// reducers
export function error(state = null, action) {
  if (!action.error || action.suppressGlobalErrorNotification) {
    return state
  }
  if (action.type === 'RESET_ERROR') {
    return null
  }
  return action.error
}

export function form(state = {}, action) {
  switch (action.type) {
  case 'SUBMIT_FORM_FAILURE':
    return Object.assign({}, state, { isFormError: true })
  // ...
  default:
    return state
  }
}

对我来说也是一样，我没有找到任何可以处理它的工作解决方案。@Dan阿布拉莫夫展示了这个例子，但这里的问题是当你有几十个表格时，事情会变得更加复杂。每次您需要处理相同的事情时，重复的代码都会开始烦人。例如：

form => client validation => CLIENT_VALIDATION_ERROR => reducer
                       FETCH_STARTED
form => form submit => SERVER_SIDE_SUCCESS  => reducers
                       SERVER_SIDE_ERROR

可能存在我们需要手动处理此类行为的例外情况，但在大多数情况下并非如此。

相关文章：