reactjs - "flux"UI中处理操作成功/错误的方法

Question

以重置密码为例。用户会看到一个表格，要求他们输入电子邮件。他们提交表单，以便通过电子邮件向他们发送重置链接。提交会触发一个操作，该操作会向 /api/password/reset 发送 POST 并返回成功或失败。

显然我想更新用户界面，以便用户知道发生了什么。 Flux 的方式是让 Action 分派(dispatch)一个常量，例如PASSWORD_RESET_SUCCESS 和存储监听调度程序，以便它们可以更改状态。组件监听存储，以便在存储状态更改时更改 UI。

在密码重置的情况下，我真的看不出一种明智的方法来让它在商店中运行(而且这样做似乎很冗长)。唯一的状态变化似乎与该表单/组件直接相关。用户离开该页面后不需要保留任何内容。

• 让组件直接监听调度程序是否“flux-y”？
• 商店是否有合理的设计，可以让我处理此类不直接链接到应用中模型的通用事件？

非常感谢!

(这与 https://github.com/mwillmott/techbikers 的工作有关，以防有人感兴趣)

Answer 1

• 不，不是。 Flux 的架构应始终遵循相同的场景 - 组件调用 actionCreator，ActionCreator 将操作分派(dispatch)到存储，存储向所有订阅的组件发出更改。这就是 Flux 的工作原理，解释 here .
• 我认为最好的方法是使用通用的 ResultStore，它只接受操作中定义的键/值并将它们写入哈希。这样，您就可以使用一个处理程序，其名称为 onResultWrite 或类似的名称。 Flux Store 从来都不是模型的直接表示 - 它们更多的是整个应用状态的表示。

对于简单的应用程序来说，Flux 架构显然显得过于严格和复杂 - 事实确实如此。但它并不是为简单的应用程序而设计的，而是为具有大量组件的复杂 UI 设计的 - 非常复杂。这就是为什么存储、操作和组件需要尽可能地彼此分离。

如果您认为您的应用程序非常简单，您始终可以采取捷径，例如将 ChangeState 回调作为参数直接传递给操作 - 但如果其他组件需要对 PASSWORD_RESET_SUCCESS 事件使用react，您就可以自己有问题。不过，当它发生时，你总是可以考虑它。项目架构始终需要权衡、灵 active 、开发速度和性能。

开发人员最重要的技能是了解这种权衡及其值(value)，并知道在哪里进行权衡，以及在哪里不进行权衡。

祝你好运!