React Redux组件通信模式



我正在寻找一个良好的代码模式,以便在使用React&时允许组件之间进行一些通信。redux。

很可能像许多文章所建议的那样,应该通过Redux进行此通信。(例如,像这样(。

但是,在某些情况下,使用store会有点骇客,然后将其用于状态管理。这些特殊情况通常是在需要给组件的命令时,例如showhide

我将举一个例子:

可以说,我们有一个<Tooltip />组件,其所做的只是呈现一些帮助图标,当单击时,打开一个工具提示弹出窗口。可以说,我们在一页中有不止一个,但是我们要确保在给定时间只开放一个。因此,如果工具提示A打开,并且用户单击工具提示B,则B应该打开,A应关闭。

以下是我认为可能与实现此要求有关的一些模式:

使用redux :我们可以在store中使用这些工具的某些状态:

{
  showTooltip: "A" // the ID of the tooltip to show
}

这意味着我们必须connect的工具提示到Redux Store,并检查每个工具提示是否应打开ID,并且当用户单击Tooltip图标时,我们派遣操作以设置操作以设置该操作打开的工具提示。

使用其他事件机制:我们可以使用其他事件机制来redux,例如发射器。

在这种情况下,每当要打开工具提示时,我们都可以开除事件,并且所有其他工具提示都可以在获得这样的事件后聆听和隐藏自己。

我不得不说,在我看来,在应用程序中有两个事件机制似乎有些多余,但另一方面,使用Redux Store与组件进行通信似乎有些过分。

很想听听有关此问题的一些意见。

React和Redux世界通常会鼓励代表您的应用程序的行为为状态。例如,您可以将标志值保存在{modalVisible : true}的位置,而不是命令 $("#someModal").show()命令。

有许多使用状态驱动模式和弹出窗口的示例。典型的实现将存储单个模态的值或状态中某个地方的模态列表(无论是在父组件还是在redux中(,然后根据这些值适当地渲染模态组件,例如: {type : "notificationPopup", level : "warning", message : "Something happened!"}。无论您将数据存储在React,Redux,MOBX还是其他内容中,基本方法都可以。

有关特定示例,请参见Dan Abramov对"我如何在Redux中显示模态对话框?"的答案,Dave Ceddia的文章" React中的模态对话框",文章"具有React和Redux的可扩展模式"。我还有其他文章,这些文章在React组件模式中演示了模态管理#模式对话框和Redux Techniques#UI和WIDGET实现我的React/Redux链接列表的部分。

最新更新