如何管理独立反应组件之间的通信？

Question

我想实现类似于messenger.com的web应用程序，也基于反应框架。我的问题是管理列表和内容组件之间的通信，因为它们彼此无关。其父组件的render方法如下所示：

返回（ “＆LT;”列出“/＆gt;” “＆lt;”内容“/＆gt;” ）

我希望内容组件根据所选的列表元素刷新并加载一些数据，类似于messenger.com。 Here's simple mockup

我已经阅读了很多关于redux的内容，但我无法想象在这种情况下应该如何实现它。

这也是我在浏览器端运行的整个反应脚本：http://pastebin.com/ua928BEc

对不起家伙，如果这是一个菜鸟问题我刚开始反应:)

非常感谢您阅读本文，

Wojtek

Answer 1

为了用通量架构解决这个问题。

由于您正在处理列表和内容，因此您选择的列表项将调用操作（获取此列表的内容），将调度该操作，并为商店提供值需要在内容中。

如果您需要组件之间的进一步通信，您可以为列表/内容组件提供一些道具。

flux architecture description.

Flux example chat and others examples.

Answer 2

如果系统很简单，请使用全局消息传递系统，例如pub / sub或信号：PubSubJS，https://github.com/Hypercubed/mini-signals，http://ctheu.com/2015/02/12/how-to-communicate-between-react-components/

如果您的应用程序更复杂，请考虑使用助焊剂实现（flux，redux ...）。您将UI组件连接到flux存储库。您更新商店中的状态，组件将自动重新呈现。

Answer 3

Thinking in React是一个很好的教程，解释了React中的状态所有权以及组件的通信方式。一旦你熟悉它，你可以尝试在vanilla React中实现它。

当您对React感到满意但注意到由于所有状态处理逻辑而导致某些组件变得臃肿，您可能需要检查像Redux这样的Flux实现来将状态处理卸载到它。 Getting Started with Redux是一套免费的介绍性视频，可以将Redux与React结合使用，并且由官方basics tutorial完成补充。

但是don’t rush into Flux or Redux until you understand React。