使用 Flux 的错误处理程序

Error Handler with Flux

我有一个 React.js 应用程序,我正在重构它以使用 Flux 架构,并且我正在努力弄清楚错误处理在坚持 Flux 模式的同时应该如何工作。

当前遇到错误时,会触发 jQuery 事件 'AppError' 并且订阅此事件的通用错误处理助手会在用户屏幕上显示一条 Flash 消息,记录到控制台,并通过 API 电话报告。很棒的是,我可以出于任何原因从应用程序的任何部分触发错误,并以一致的方式处理它。

我似乎无法弄清楚如何将类似的范例应用于 Flux 架构。这是我遇到的两个特殊情况。

1) API 调用失败

我的所有 API 调用都是由动作创建者发出的,我使用承诺在失败时发送错误事件 (IE 'LOAD_TODOS_FAILED')。商店看到此事件并相应地更新它的状态,但我仍然没有上一次迭代(通知等)的一般错误行为。

可能的解决方案:

我可以创建一个绑定到 'LOAD_TODOS_FAILED' 操作的 ErrorStore,但这意味着每次我遇到新类型的错误时,我都需要将该操作显式添加到 ErrorStore,而不是让所有错误都出现自动处理。

2) 商店收到意外操作

这是我真正感到困惑的问题。我想处理将动作分派给 Store 的情况,这在给定 Store 的当前状态下没有意义。我可以处理 Store 中的错误以清理状态,但仍然可能希望触发错误以发生意外情况。

可能的解决方案:

  1. 从商店发送一个新的动作来指示错误。

    我认为商店不应该发送操作(如果我错了请告诉我),我仍然遇到与上述 API 错误相同的问题。

  2. 为订阅每个商店的错误处理创建一个 ControllerView

    我可以在每个商店上定义一个错误 属性,然后让一个视图监视每个商店并且只对错误 属性 采取行动。当错误 属性 不为空时,它可以调度新的操作等。缺点是我需要记住在创建新商店时将每个商店添加到此视图,并且每个商店都必须有一个错误 属性 的行为方式相同。它也没有解决 API 调用失败的问题。

有没有人对适合 Flux 架构的通用错误处理程序有建议的方法?

TL;DR

我需要处理大多数 Action Creator 和 Store 中的错误。如何为任何类型的一般错误设置一致的错误处理?

  1. API调用失败

如果您想避免在 ErrorStore 中列出每个错误操作,您可以有一个通用的 APP_ERROR 操作,并具有该操作的属性来更详细地描述它。然后您的其他商店只需要检查这些属性以查看该操作是否与它们相关。没有规定商店中注册的回调需要关注操作的类型,或者只关注类型——这通常是确定操作是否相关的最方便和一致的方式。

  1. 商店收到意外操作

不要发出新的动作来响应动作。这会导致调度错误,并导致级联更新。相反,应提前确定应分派的操作。如果有帮助,您可以在发出操作之前查询商店。

您的第二个解决方案听起来不错,但您提到的危险之处在于 "When the errors property is not null, it could dispatch new actions, etc"——同样,您不想发布响应其他操作的操作。这就是 Flux 试图避免的痛苦之路。您的新控制器视图将简单地从存储中获取值并通过呈现正确的视图进行响应。