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

时间:2016-02-17 22:00:38

标签: javascript reactjs frontend redux reactjs-flux

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

返回( “<”列出“/>” “<”内容“/>” )

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

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

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

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

非常感谢您阅读本文,

Wojtek

3 个答案:

答案 0 :(得分:0)

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

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

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

flux architecture description.

Flux example chat and others examples.

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

相关问题