javascript - 如何在 Redux 中制作全局错误处理程序并在需要时覆盖它？

Question

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

我使用 redux-thunk 中间件分派(dispatch)异步操作

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

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

Answer 1

当 action 到达 reducer 时，它就是一个事实。它反射(reflect)了已经发生的事情。询问“是否有其他 reducer 处理过此操作？”是没有意义的。因为 reducer 应该是被动的，并且在一般意义上，不知道彼此的存在。他们应该尽可能独立。

没有一种“真正”的方法可以完成您想要的，但是由于您已经使用了将任何具有 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
  }
}