如何确定哪个反应视图应该处理商店事件

Posted 2023-02-22

【中文标题】如何确定哪个反应视图应该处理商店事件

【英文标题】：How to determine which react view should handle a store event

【发布时间】：2015-06-12 15:37:05

【问题描述】：

我将 ReactJs 与 Flux 一起使用。所以我有视图、动作创建者、调度员和商店。我创建了一个使用“searchActionCreator”（调用搜索 API）的可重用搜索组件。最后，“searchStore”将接收搜索结果并发出一个事件，搜索组件将根据该事件来显示搜索结果。

使用该组件的前端开发人员只需要设置一些属性来定义要搜索的内容并传递一个方法（委托），当用户选择其中一个搜索结果时将调用该方法（委托）。我不想将搜索结果从父组件传递到搜索视图，因为这会使重新使用搜索组件做其他事情变得有点复杂。

只要每个浏览器窗口中只有一个搜索组件，一切都可以正常工作。因为每个搜索组件都向 searchStore 注册了一个事件处理程序，所以当其中一个搜索组件调用搜索 API 时，每个搜索组件都会被触发以显示搜索结果。

我自己可以想到一些选项来防止这种行为。例如。在创建并触发搜索操作之后，我可以将搜索组件的状态设置为“等待”，直到该组件收到结果。只有处于“等待”状态的组件才需要处理来自 searchStore 的“resultsReady”事件。另一种选择是将搜索组件的唯一 ID 与搜索查询一起传递给搜索操作创建者。搜索存储需要将此 ID 提供给所有请求搜索组件，以便搜索组件可以将此 ID 与其自己的唯一 ID 进行比较。

我无法想象我是唯一遇到这一挑战的人，并且必须有某种标准化的解决方案。我已经阅读了关于异步请求的good article，但在本文中也没有找到这个问题的答案。任何建议将不胜感激！

【问题讨论】：

当有多个组件确实不需要共享存储时，我认为这是“存储”模式没有意义的情况。这就是我处理类似事情的方式。我只有一个包装搜索并将其保存在父容器中的组件。它运行良好，仍然充分抽象了搜索组件。

@WiredPrairie 我同意你的观点，但是因为我们刚刚开始实施 Flux，所以我现在不想放弃这个原则（即使不是整个应用程序的某些小部分）。也许我们稍后会决定这是要走的路。

好的。这只是一个模式。我认为商店最能代表您将与数据库同步的数据（双向）。任何更多的“状态”和客户端通常都不适合模型。即使是复杂的数据和深度数据模型也很难构建到 Flux 存储中。

@WiredPrairie 我被你的最后一句话“即使是复杂的数据和深度数据模型也很难构建到 Flux 存储中”所触发。现在这似乎是我们最大的挑战。您有什么建议或最佳做法要分享吗？

【参考方案1】：

解决方案取决于您使用的 Flux 实现。我实际上会通过将 searchStore 实现为支持多个搜索的存储库来解决这个问题，结果由某种唯一的组件 id 字符串索引。然后，我将创建一个聚合存储（使用 Reflux 很容易），它根据给定的组件 ID 字符串过滤 searchStore。因此，组件仅与聚合存储交互以保持简单。

【讨论】：

+1 用于显示聚合商店。虽然我不需要支持并行搜索，但理论上我不需要多个商店同时搜索结果。但是您描述的方法可以更容易地将一个组件绑定到每个商店（当然，除非它们共享相同的 ID）。