多个React应用程序通过单个redux存储进行通信

Question

背景故事：目前我的公司有一个“门户”，其中许多不同的内部应用程序是独立开发的，然后被归入网站。 帧之间存在大量的喋喋不休（通常检查状态或为其他应用程序设置某些状态），这些都在同一域（不是跨域）上托管。 这种方法工作正常但最近我们正在考虑转向redux，因为这种方法看起来很脏，各种团队在window.top （全局）上抛出了大量数据。 像redux这样的东西能够以比在window.top上读取和设置变量更加统一的方式处理多个“应用程序”“通信”，还是会对redux使用不当？

Answer 1

帧具有不同的上下文。 您必须引用父商店，例如，通过window公开商店（及其dispatch ）。 它可以说比一组随机变量更清晰。

也就是说：如果它们是真正独立的应用程序，那么我可能选择通过每个框架中的网络套接字真正独立，通过从后端（Elixir，Node等）提供的实时更新进行通信，这非常适合于任务。

这样做可以更灵活地分离出应用程序（例如，我只是希望app Foo在自己的窗口中运行），将帧间通信发送到公共总线上，以便其他任何想要查看这些消息的内容都可以，等等。

Answer 2

是的，您确实可以在顶级页面中拥有一个共同的Redux存储，并向其发送操作。 但是，如果您希望不同的iFrame听取更新，那么您需要一些Redux中间件来观察状态更改并允许iFrame订阅这些事件。

我希望尽管这可能会使你的代码更好地构建起来，如果你有很多不同的团队，那么所有猴子都会修补一个Redux存储，你的代码会很快变脏。

我建议有一个pub / sub库，比如顶级页面中的postal.js，用于在不同的应用程序之间传递消息，然后为共享数据创建一个简单的名称间隔对象存储，并保护它免受错过使用-immutable库。

Answer 3

这种方法工作正常但最近我们正在考虑转向redux，因为这种方法看起来很脏，各种团队在window.top（全局）上抛出了大量数据。

当事情到达这一点时，我会考虑清理代码或实现redux。 我通常避免在全局或窗口上存储任何内容。

我强烈建议实施redux if

• 贵公司将暂时使用此门户网站
• 你想学习redux（真的很酷）
• 团队中的某个人已经熟悉redux

为什么要减少？

• 如果你在多个视图或帧中跟踪状态，那么它对所有状态使用单一事实来源都是很好的
• 超级模块化，在团队环境中工作的乐趣

根据您的描述，似乎您的redux是您问题的完美解决方案。

Redux非常简单，但根据你的技术堆栈的其他部分，你可能需要使用某种带有redux的中间件。