在React Redux中处理提取错误的最佳方法是什么?

JavaScript

2020-03-12

我有一个用于客户的减速器,另一个用于AppToolbar的减速器,还有一些其他的减速器...

现在说我创建了一个删除客户端的提取操作,如果失败,我在Clients reducer中有代码,该代码应该做一些事情,但是我也想在AppToolbar中显示一些全局错误。

但是客户端和AppToolbar减速器不共享状态的同一部分,并且我无法在减速器中创建新的动作。

那么我应该如何显示全局错误?谢谢

更新1:

我忘了提到我使用este devstack

更新2: 我将Eric的答案标记为正确,但是我不得不说,我在este中使用的解决方案更像是Eric和Dan的答案的结合……您只需要找到最适合自己代码的方法即可。 。

第1078篇《在React Redux中处理提取错误的最佳方法是什么?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
猪猪卡卡西 2020.03.12

您可以使用axios HTTP客户端。它已经实现了拦截器功能。您可以先拦截请求或响应,然后再进行捕获或捕获。

https://github.com/mzabriskie/axios#interceptors

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

ProJinJin 2020.03.12

Erik’s answer is correct but I would like to add that you don’t have to fire separate actions for adding errors. An alternative approach is to have a reducer that handles any action with an error field. This is a matter of personal choice and convention.

For example, from Redux real-world example that has error handling:

// Updates error message to notify about the failed fetches.
function errorMessage(state = null, action) {
  const { type, error } = action

  if (type === ActionTypes.RESET_ERROR_MESSAGE) {
    return null
  } else if (error) {
    return error
  }

  return state
}
乐小小猪猪 2020.03.12

我目前针对一些特定错误(用户输入验证)采用的方法是让我的子减速器引发异常,将其捕获到我的根减速器中,并将其附加到操作对象。然后,我有一个redux-saga,它检查动作对象是否有错误,并在这种情况下用错误数据更新状态树。

所以:

function rootReducer(state, action) {
  try {
    // sub-reducer(s)
    state = someOtherReducer(state,action);
  } catch (e) {
    action.error = e;
  }
  return state;
}

// and then in the saga, registered to take every action:
function *errorHandler(action) {
  if (action.error) {
     yield put(errorActionCreator(error));
  }
}

然后按照Erik的描述将错误添加到状态树中。

我很少使用它,但是它使我不必重复合法化归约化器的逻辑(因此它可以保护自己免受无效状态的侵害)。

null 2020.03.12

我要做的是按效果将所有错误处理集中在效果中

/**
 * central error handling
 */
@Effect({dispatch: false})
httpErrors$: Observable<any> = this.actions$
    .ofType(
        EHitCountsActions.HitCountsError
    ).map(payload => payload)
    .switchMap(error => {
        return of(confirm(`There was an error accessing the server: ${error}`));
    });

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android