React-Redux - 向组件广播动作

时间:2017-07-17 11:59:29

标签: reactjs redux

我目前有一个问题,我不确定我是不是看到了更大的图片(或者可能根本没有看到这一点),或者这是否在redux中有效...

我有一个固定大小的SVG图表。用户可能会在我的页面上打开一个面板,这将减少图表的宽度。这导致我的图表看起来压缩了。为了解决这个问题,图表应该以更新的尺寸重新渲染,以便一切看起来都很好。

所以...我有一个用户点击的组件,以便打开面板。该组件应该触发一个动作,理想情况下是一般的,可重复使用的,如“rerenderSVG”。我可以使用标准的redux工作流程,并让我的reducer在我的状态中放置一些标志,并让我所有与svg相关的组件听取它。但这感觉有点矫枉过正。在我的状态下,这不是我想要的,我只想要一个广播到我所有已安装组件的动作,例如“嘿,组件,这刚刚发生,如果这涉及到你:请做出反应”。

这可以很容易地完成,但在还原...我不知道。这种模式可以实现并且仍然符合redux方式吗?

如果这个问题如此平凡,以至于已有数千个帖子:对不起!但我真的不知道要看哪个关键词...

2 个答案:

答案 0 :(得分:0)

默认情况下,所有操作都会在flux / redux中广播到所有reducer。您需要在每个要更新状态的Reducer中处理该特定操作。

如果您不想更新所有组件并只更新当前正在显示的组件,您可以使用setState重新呈现该特定组件。

答案 1 :(得分:0)

如果我的意思正确,那么我认为你根本不需要为此目的而使用redux。你在寻找什么是父(通常是容器)组件的本地状态。

为什么不在redux存储区中保留图表呈现其内容所需的原始数据(图形/等的坐标/数据集......),但不要放置任何标志或与更改相关的任何数据图表框的高度/宽度。 由于redux存储本身存储原始数据,因此数据的形状应该是连接容器组件的本地状态。一旦数据被“塑造”为调整大小的视图,您可以通过道具将其传递给您的“虚拟”表示组件,其中将描绘此数据。我假设你很清楚the difference between smart/dumb or container/presentational components

一旦您的用户以某种方式(有意或无意)更改了图表框的大小,您就可以处理此resize事件并运行一个重新计算数据形状的函数(例如rerenderCharts)在组件上调用setState。无论何时更改容器的大小,都会导致组件的所有链都被重新呈现。

Here您可以看到如何在组件级别处理resize事件的一些示例。

希望一切都有意义。