在 react redux 中处理 fetch 错误的最佳方法是啥？

Posted 2023-02-22

【中文标题】在 react redux 中处理 fetch 错误的最佳方法是啥？

【英文标题】：What is the best way to deal with a fetch error in react redux?在 react redux 中处理 fetch 错误的最佳方法是什么？

【发布时间】：2016-03-27 23:24:40

【问题描述】：

我有一个用于客户端的减速器，另一个用于 AppToolbar 和其他一些...

现在假设我创建了一个 fetch 操作来删除客户端，如果它失败了，我在 Clients reducer 中有代码应该做一些事情，但我还想在 AppToolbar 中显示一些全局错误。

但客户端和 AppToolbar 减速器不共享相同的状态部分，我无法在减速器中创建新操作。

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

更新 1：

我忘了提到我使用estedevstack

更新 2： 我将 Eric 的答案标记为正确，但我不得不说我在 este 中使用的解决方案更像是 Eric 和 Dan 的答案的组合...... 你只需要在你的代码中找到最适合你的...

【问题讨论】：

您获得了接近投票，这可能是因为您没有提供大量示例代码。如果问题的概述更清楚，您的问题和您得到的答案将对其他人更有帮助。

我必须同意@acjay 这个问题缺乏上下文。我已经在下面（使用代码示例）回答了一个通用的解决方案，但是您的问题可以使用一些改进。看来您可能有几个单独的问题。 1) 处理异步操作/错误。 2) 在你的 redux 状态树中适当地拆分状态。 3) 获取组件所需的数据。

@ErikTheDeveloper 谢谢，你的回答看起来很棒。但你是对的，我忘了提上下文。我编辑了我的问题，我正在使用 este devstack，看起来你的答案并不适用，因为它是......

【参考方案1】：

如果你想有“全局错误”的概念，可以创建一个errorsreducer，它可以监听addError、removeError等...动作。然后，您可以在 state.errors 连接到您的 Redux 状态树，并在适当的地方显示它们。

有很多方法可以解决这个问题，但总体思路是全局错误/消息将值得他们自己的 reducer 与<Clients />/<AppToolbar /> 完全分开。当然，如果这些组件中的任何一个需要访问errors，您可以在需要的地方将errors 作为道具传递给它们。

更新：代码示例

如果您将“全局错误”errors 传递到***<App /> 并有条件地渲染它（如果存在错误），下面是一个示例。使用react-redux's connect 将您的<App /> 组件连接到一些数据。

// App.js
// Display "global errors" when they are present
function App(errors) 
  return (
    <div>
      errors && 
        <UserErrors errors=errors />
      
      <AppToolbar />
      <Clients />
    </div>
  )


// Hook up App to be a container (react-redux)
export default connect(
  state => (
    errors: state.errors,
  )
)(App);

对于动作创建者而言，它会根据响应分派（redux-thunk）成功失败

export function fetchSomeResources() 
  return dispatch => 
    // Async action is starting...
    dispatch(type: FETCH_RESOURCES);

    someHttpClient.get('/resources')

      // Async action succeeded...
      .then(res => 
        dispatch(type: FETCH_RESOURCES_SUCCESS, data: res.body);
      )

      // Async action failed...
      .catch(err => 
        // Dispatch specific "some resources failed" if needed...
        dispatch(type: FETCH_RESOURCES_FAIL);

        // Dispatch the generic "global errors" action
        // This is what makes its way into state.errors
        dispatch(type: ADD_ERROR, error: err);
      );
  ;

虽然您的 reducer 可以简单地管理一系列错误，但可以适当地添加/删除条目。

function errors(state = [], action) 
  switch (action.type) 

    case ADD_ERROR:
      return state.concat([action.error]);

    case REMOVE_ERROR:
      return state.filter((error, i) => i !== action.index);

    default:
      return state;
  

【讨论】：

Erik，我有一些类似于您在此处建议的内容，但令人惊讶的是，如果 someHttpClient.get('/resources') 或 fetch('/resources') 在我的代码中使用返回 500 Server Error，我从未设法获得 catch 函数.您是否有任何想法，我可能会犯错误？从本质上讲，我所做的是fetch 确实发送了一个请求，该请求最终以我的routes 结束，其中我在mongoose 模型上调用一个方法来做一些非常简单的事情，比如添加文本或从数据库中删除文本。

嘿，我是通过 Google 搜索来到这里的 - 只是想感谢你提供了一个很好的例子。我一直在努力解决同样的问题，这太棒了。当然，解决方案是将错误集成到存储中。为什么我没有想到...干杯

发生错误时如何执行函数？例如我需要在 UI 中显示 toast/alert，而不是通过更新父组件的 props 来呈现 Alert 组件

在使用 createSlice 使用 redux-toolkit 时，我们如何将 ADD_ERROR 添加到减速器错误案例中。

【参考方案2】：

Erik’s answer 是正确的，但我想补充一点，您不必触发单独的操作来添加错误。另一种方法是使用一个reducer 来处理任何带有error 字段的操作。这是个人选择和惯例的问题。

例如，来自具有错误处理的Redux real-world example：

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

【讨论】：

这是否意味着在每个成功请求上我们都应该将 RESET_ERROR_MESSAGE 类型传递给 errorMessage 减速器？

@DimitriMikadze 不，它没有。这个函数只是错误状态的减速器。如果您通过 RESET_ERROR_MESSAGE 它将清除所有错误消息。如果你没有通过并且没有错误字段，它只是返回不变的状态，所以如果之前的操作有一些错误，他们仍然会在成功操作之后......

我更喜欢这种方法，因为它允许更自然的内联响应，因为消费者将error 附加到操作负载。谢谢丹！

我无法完全理解这是如何工作的。除了现实世界的例子之外，您是否有任何孤立的文件/视频来解释这一点？这是大多数项目的核心要求，我发现关于该主题的文档很难理解。谢谢。

@MattSaunders 在试图理解它时，我遇到了 Dan 本人（回答者，实际上是 Redux 的创建者）的 Redux 课程，其中有一个关于 Displaying Error Messages 的部分以及这些答案和现实世界的例子把它带回家了。祝你好运。

【参考方案3】：

我目前针对一些特定错误（用户输入验证）采取的方法是让我的子减速器抛出异常，在我的根减速器中捕获它，并将其附加到操作对象。然后我有一个 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 的描述将错误添加到状态树。

我非常谨慎地使用它，但它使我不必复制合法属于 reducer 的逻辑（因此它可以保护自己免受无效状态的影响）。

【参考方案4】：

编写自定义中间件来处理所有与 api 相关的错误。在这种情况下，您的代码会更干净。

   failure/ error actin type ACTION_ERROR

   export default  (state) => (next) => (action) => 

      if(ACTION_ERROR.contains('_ERROR'))

       // fire error action
        store.dispatch(serviceError());

       

【讨论】：

也使得调试恕我直言

你不需要中间件，你可以在reducer中写完全相同的if

如果有超过 50 个 api，那么你需要在每个地方写。相反，您可以编写自定义中间件来检查错误。

【参考方案5】：

我所做的是将所有错误处理集中在每个效果的基础上

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

【参考方案6】：

您可以使用 axios HTTP 客户端。它已经实现了拦截器功能。您可以在 then 或 catch 处理请求或响应之前拦截它们。

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

【讨论】：

是的，但是你没有向 redux 发送任何东西？

这种做法还不错。通常 redux 中的 store 是一个单例，你可以在 axios 拦截器文件中导入 store 并使用 store.dispatch() 来触发任何操作。这是在一个地方处理系统中所有 api 错误的统一方法