React Redux 组件通信模式

Question

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

很可能这种通信应该通过 redux 完成，就像许多文章所建议的那样。 （例如 one）。

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

我举个例子：

假设我们有一个 <Tooltip /> 组件，它所做的只是呈现一些帮助图标，单击该图标时，会打开一个工具提示弹出窗口。 假设我们在一个页面中有多个，但我们想确保在给定时间只有一个打开。因此，如果工具提示 A 打开，并且用户单击工具提示 B，则 B 应该打开而 A 应该关闭。

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

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

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

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

Using additional event mechanism: 我们可以对Redux使用一个额外的事件机制，比如emitter.

在这种情况下，我们可以在工具提示即将打开时触发一个事件，所有其他工具提示在收到此类事件后可以监听并隐藏自己。

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

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

Answer 1

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

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

有关具体示例，请参阅 Dan Abramov 对 , Dave Ceddia's article "Modal Dialogs in React", the article "Scalable Modals with React and Redux". I also have other articles that demonstrate modal management in the React Component Patterns#Modal Dialogs and Redux Techniques#UI and Widget Implementations sections of my React/Redux links list 的回答。