Question

我正在寻找一个好的代码模式，以便在使用React＆amp;终极版。

很可能这种沟通应该通过redux来完成，就像很多文章所说的那样。（比如这个one）。

但是，在某些情况下，使用store会有点破解，而不是将其用于状态管理。这些特殊情况通常是在您需要向组件发出命令时，例如show或hide。

我举一个例子：

假设我们有一个<Tooltip />组件，它所做的只是渲染一些帮助图标，点击后会打开一个工具提示弹出窗口。并且假设我们在页面中有多个，但我们希望确保在给定时间只打开一个。因此，如果工具提示A处于打开状态，并且用户单击工具提示B，那么B应该打开，A应该关闭。

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

使用Redux ：我们可以在store状态下获取这些工具提示：

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

这意味着我们必须connect到redux商店的工具提示，并检查每个工具提示是否是应该打开的ID，以及当用户点击工具提示图标时，我们发送一个动作来设置打开的工具提示。

使用其他事件机制：我们可以使用其他事件机制来实现Redux，例如emitter。

在这种情况下，我们可以在每次打开工具提示时触发事件，并且所有其他工具提示可以在收到此类事件后进行侦听和隐藏。

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

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

Answer 1

React和Redux世界通常鼓励将应用程序的行为表示为状态。例如，您可以在某个地方[xml]$file = Get-Content videoserver.xml $xmlProperties = $file.SelectNodes("//Users/userlist/*") $o = New-Object Object foreach ($xmlProperty in $xmlProperties) { $username = $xmlproperty.username $camera = $xmlProperties | Select-Xml -XPath "//cameraid" | Select-Object –ExpandProperty “node” [PSCustomObject]@{ username = $username; Cameras = $camera } }保存标记值，而不是命令式$("#someModal").show()命令。

有很多使用状态来驱动模态和弹出窗口的例子。典型的实现将在某个地方（在父组件或Redux中）存储单个模态或模态列表的值，然后根据这些值适当地呈现模态组件，例如：{modalVisible : true} 。无论您是将数据存储在React，Redux，MobX还是其他内容，基本方法都有效。

有关具体示例，请参阅Dan Abramov对"How can I display a modal dialog in Redux?"，Dave Ceddia的文章"Modal Dialogs in React"，文章"Scalable Modals with React and Redux"的回答。我还有其他文章在React Component Patterns#Modal Dialogs的Redux Techniques#UI and Widget Implementations和React/Redux links list部分展示了模态管理。

React Redux组件通信模式

1 个答案: