Redux组件通信模式

Question

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

很可能这种交流应该通过redux完成，就像许多文章所建议的那样。(比如这个一 )。

但是，在某些情况下，使用store可能会有一些问题，而不是将其用于状态管理。这些特殊情况通常是当您需要向组件(如show或hide )发出命令时。

我举一个例子：

让我们说，我们有一个<Tooltip />组件，它所做的就是呈现一些帮助图标，单击该图标时，打开一个工具提示弹出。让我们说一页中有不止一个，但是我们想确保在给定的时间里只有一个是打开的。因此，如果工具提示A是打开的，并且用户单击工具提示B，那么B应该打开，A应该关闭。

下面是一些我认为可能与实现此需求相关的模式：

使用Redux：我们可以在store中为这些工具提示设置一些状态：

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

这意味着我们必须将工具提示发送到redux存储，并检查每个工具提示是否为应该打开的ID，并且当用户单击工具提示图标时，我们将发送一个操作来设置打开的工具提示。

使用附加的事件机制：我们可以对Redux使用附加的事件机制，比如发射极。

在这种情况下，每当工具提示即将被打开时，我们就可以触发一个事件，而所有其他工具提示一旦得到这样的事件就可以监听和隐藏自己。

我不得不说，在我看来，在应用程序中可能有两个事件机制似乎有点多余，但另一方面，使用redux存储与组件通信似乎有点过分。

我很想听听你对这个问题的看法。

Answer 1

React和Redux世界通常鼓励将应用程序的行为表示为状态。例如，与命令式$("#someModal").show()命令不同，您可能会将一个标志值保存在某个显示{modalVisible : true}的位置。

有许多使用状态驱动调制解调器和弹出窗口的例子。一个典型的实现会在某个地方(在父组件或Redux中)存储单个模态或modals列表的值，然后根据这些值(例如：{type : "notificationPopup", level : "warning", message : "Something happened!"} )呈现模态组件。无论您是将数据存储在React、Redux、MobX还是其他什么地方，基本方法都是有效的。

有关具体示例，请参阅Dan对“如何在Redux中显示模态对话框？”的回答，Dave的文章“反应中的模态对话”，文章“带有React和Redux的可伸缩模态”。我还有其他文章在我的React组件Patterns#Modal对话框和Redux Techniques#UI和Widget实现部分演示了Redux/Redux链接列表的模式管理。