Javascript 在react redux中处理获取错误的最佳方法是什么？

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

现在让我们假设我创建了一个fetch操作来删除客户机，如果失败，我在客户机reducer中有一些代码，可以做一些事情，但是我想在AppToolbar中显示一些全局错误

但是客户端和AppToolbar简化程序不共享状态的同一部分，我无法在简化程序中创建新操作

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

更新1:

我忘了提到我使用devstack

更新2: 我将Eric的答案标记为正确，但我必须说，我在este中使用的解决方案更像是Eric和Dan答案的组合。。。

---

您只需找到最适合您的代码…

如果您想了解“全局错误”的概念，您可以创建一个

错误减少器，它可以侦听加法器、删除错误等。。。行动。然后，您可以在
state.errors
链接到Redux状态树，并在适当的地方显示它们

有很多方法可以实现这一点，但总的想法是，全局错误/消息应该与
/
完全分离，以根据响应连接您的
）成功与失败

导出函数fetchSomeResources（）{
返回调度=>{
//异步操作正在启动。。。
分派（{type:FETCH_RESOURCES}）；
someHttpClient.get（“/resources”）
//异步操作成功。。。
。然后（res=>{
分派（{type:FETCH\u RESOURCES\u SUCCESS，data:res.body}）；
})
//异步操作失败。。。
.catch（错误=>{
//如果需要，调度特定的“某些资源失败”。。。
分派（{type:FETCH\u RESOURCES\u FAIL}）；
//分派通用“全局错误”操作
//这就是它进入状态的原因
分派（{type:ADD_ERROR，ERROR:err}）；
});
};
}

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

函数错误（状态=[]，操作）{
开关（动作类型）{
案例添加错误：
返回state.concat（[action.error]）；
案例删除错误：
返回state.filter（（错误，i）=>i！==action.index）；
违约：
返回状态；
}
}
是正确的，但我想补充一点，添加错误不需要单独启动操作。另一种方法是使用一个reducer来处理带有
错误
字段的任何操作。这是个人选择和惯例的问题

例如，从具有错误处理的：

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

我目前针对一些特定错误（用户输入验证）采取的方法是让我的子还原程序抛出异常，在我的根还原程序中捕获它，并将其附加到动作对象。然后我有一个redux传奇，它检查动作对象是否有错误，并在这种情况下用错误数据更新状态树

因此：

然后将错误添加到状态树中，正如Erik所描述的

我很少使用它，但它使我不必复制合法属于reducer的逻辑（因此它可以保护自己不受无效状态的影响）。
您可以使用axios HTTP client。它已经实现了拦截器特性。您可以在处理请求或响应之前拦截它们



//添加请求拦截器
axios.interceptors.request.use（函数（配置）{
//在发送请求之前做些什么
返回配置；
}，函数（错误）{
//处理请求错误
返回承诺。拒绝（错误）；
});
//添加一个响应拦截器
axios.interceptors.response.use（函数（响应）{
//处理响应数据
返回响应；
}，函数（错误）{
//处理响应错误
返回承诺。拒绝（错误）；
});编写自定义中间件来处理所有与api相关的错误。在这种情况下，您的代码将更干净

   failure/ error actin type ACTION_ERROR

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

      if(ACTION_ERROR.contains('_ERROR')){

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

       }
}

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

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

/**
*中央错误处理
*/
@效果（{dispatch:false}）
httpErrors$：Observable=this.actions$
.字体(
EHitCountsActions.HitCountsError
).map（有效负载=>有效负载）
.switchMap（错误=>{
返回（确认（`访问服务器时出错：${error}`））；
});
您的票数很接近，这可能是因为您没有提供大量示例代码。如果问题描述得更清楚，你的问题和你得到的答案将对其他人更有帮助。我必须同意w/@acjay的观点，这个问题缺乏背景。我在下面（用代码示例）用一个通用的解决方案回答了您的问题，但是您的问题可能需要一些改进。看起来你可能有一些不同的问题。1） 处理异步操作/错误。2） 在redux状态树中适当地拆分状态。3） 获取组件所需的数据。@ErikTheDeveloper谢谢，您的答案看起来很棒。但你是对的，我忘了提到上下文。我编辑了我的问题，我使用的是este devstack，看起来你的答案不适用于这里，因为它是…这是否意味着在每个成功请求中，我们都应该将重置错误消息类型传递给错误消息还原器？@DimitriMikadze不，它不适用。此函数仅用于减少错误状态。如果您传递重置错误消息，它将清除所有错误消息。如果您没有通过，并且没有错误字段，它只返回未更改的状态，因此，如果以前的操作中有一些错误，它们在成功操作后仍然会出现……我更喜欢这种方法，因为当消费者将
错误
附加到操作负载时，它允许更自然的内联响应。谢谢你，丹！我不太明白这是怎么回事
/**
 * 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}`));
    });