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

时间:2016-12-23 16:00:06

标签: javascript redux

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

3 个答案:

答案 0 :(得分:6)

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

那说:如果他们是真正独立的应用程序,那么我可能选择通过后端(Elixir,Node等)提供的实时更新通过每个框架中的网络套接字真正独立。 #39; s非常适合这项任务。

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

答案 1 :(得分:2)

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

我希望尽管这可能会使你的代码结构更好一些,如果你有很多不同的团队,那么所有猴子都会修补一个Redux商店,你的代码会很快变脏。

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

答案 2 :(得分:1)

  

这种方法很好但最近我们正在考虑转向   redux因为这种方法看起来很脏,而且各种团队都在辗转反侧   window.top(全局)上的数据。

当事情发生时,我会考虑清理代码或实现redux。我通常避免在全局或窗口上存储任何内容。

如果

,我强烈建议实施redux
  • 贵公司将暂时使用此门户
  • 你想学习redux(它真的很酷)
  • 团队中的某个人已经熟悉redux

为什么选择redux?

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

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

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