模块化 ReactJS 应用程序 - 混乱答案

【问题标题】：Modular ReactJS Application - Confusion模块化 ReactJS 应用程序 - 混乱
【发布时间】：2016-10-22 11:13:45
【问题描述】：

现在我们拥有构建完整 SPA 所需的一切（路由：react-router，异步：sagas，状态：redux 等）。架构和创建这种应用程序的过程对我来说很简单，但是当我需要创建只有几个独立模块并且它们需要相互通信的网站时，问题就开始了。例如，在 Facebook 上有几个地方可以通知用户他有新消息，或者当我们从用户列表中单击用户时，会创建新的聊天框。使用 React 开发工具，我们可以看到创建了新的独立组件。在 SPA 中有一个根组件，整个内容都在其中。所以我的问题是如何解决这种问题？即创建小模块并提供它们之间的通信？

【问题讨论】：

标签： javascript reactjs module frontend single-page-application

【解决方案1】：

您可以使用 Redux。 Redux 允许您使用全局存储，其工作方式类似于 React 组件。你可以从任何地方更新全局 store，只要 store 更新，redux 就会更新其他组件。

Redux on Github

【讨论】：

Redux 存储附加到连接到某个根组件的 Provider，所以情况并非如此，因为在这种方法中，所有内容都必须在此提供程序中，我希望有几个非分层模块。想象一下，您有一个可以投注一些体育赛事的网站，为了简单起见，我们假设我们有一个存储当前用户余额的用户面板和一个简单的框，您可以在其中选择赛事和投注。站点不是 SPA（其他所有内容都由服务器呈现）您只想将 ReactJS 用于这两件事，即更新用户帐户余额和投注事件。这是个问题
但是使用一个全局父级有什么问题？如果您不想使用全局存储，请告诉我window 全局变量和全局存储有什么区别，在这两种情况下，您都有一个共同的全局父级。
它们之间只有两个区别。 1) Redux 实现了Observer 设计模式，与window 对象不同。 2) Redux Store 是一个“不可变”的对象。
我觉得这里有误会。例如，在<body> <div id="react-module></div> <div>some content rendered by server...</div> [more content...] <div id="react-module2"></div> ... </body> 下面的代码中，我想在 ReactJS 中创建两个“模块”，它们需要以某种方式相互通信。你会做什么来实现这一目标？我不想使用 ReactJS 创建页面的其余部分。