在 Flux 中，一个 React 组件中的操作影响另一个组件的适当方式是啥？

Posted 2023-02-22

【中文标题】在 Flux 中，一个 React 组件中的操作影响另一个组件的适当方式是啥？

【英文标题】：In Flux what's the appropriate way for an action in one React component to affect another component?在 Flux 中，一个 React 组件中的操作影响另一个组件的适当方式是什么？

【发布时间】：2015-01-30 01:09:36

【问题描述】：

我正试图围绕 Facebook 的 Flux...

假设我有一个带有侧边菜单的应用，可以通过标题中的按钮隐藏和显示。

我的标题是一个组件，我的侧边菜单是另一个组件。

目前，我的 Header 组件只是在 html div 侧菜单元素上设置了一个类，该类会被 CSS 动画隐藏。

这里的总体思路是什么？

【参考方案1】：

ReactJs 并不真正关心它是如何获取数据的（它的数据是如何传入的，或者应该如何在 Web 应用程序中处理该数据）。这就是 Flux 的用武之地，它创建了一种处理数据的实用方法。数据流本质上是：

Action -> Data Store -> Component

数据的改变是通过调用 Actions 来实现的。数据存储本身必须监听操作并改变存储中的数据。这使数据结构和逻辑保持平坦。

在您的情况下，您的数据流可能看起来像这样：

标题 --> 用户单击 --> 触发操作 --> 更新商店 --> 侧边菜单监听并响应该商店更改。

您的案例是一个简单的示例，您可能并不真正需要 Flux。我认为如果您有一个维护视图状态逻辑的父组件，并为 2 个子组件（侧菜单和标题）使用道具/回调，这会更容易。但是，您需要进行 ajax 调用和维护会话的更高级示例，Flux 将变得有用。就像你有一个登录组件，并且你想根据用户显示不同的侧边菜单选项和标题选项：

Login Component --> User Logins --> Calls Action #signIn --> Showing Loading State
                                                         --> Dispatcher handles action (make api call to authenticate user and load user data)

On success (for the api call), alert sessionStore, and populate store with data
On error, maybe fire another action that says login failed or something

SessionStore ---> Header Component (Listens to Store) --> Update view based on store information
             ---> Side Menu Component (Listens to Store) --> Update

【讨论】：

这是通量或事件发射器有用的情况之一。切换按钮和侧边栏与标题组件并不真正相关。切换按钮很容易位于页脚、其他地方或多个位置，或者根本不存在。这使得将处理程序传递给标头是不明智的，因为您在逻辑上必须将此处理程序传递给它可以呈现到的其他可能组件（或者标头的调用者必须知道它的实现，这很糟糕）。

侧边菜单组件 --> 用户点击 --> 触发动作 #buttonClick --> 存储监听并响应该动作，更改状态 --> 标题组件监听存储更改，并在商店更改时做出响应 我假设您在这里交换了侧边菜单组件和标题组件？按钮在标题中，触发侧边菜单隐藏。

哦，哎呀，是的，我的错。它将是标题 --> 用户单击 --> 触发操作 --> 更新商店 --> 侧菜单监听并响应该商店更改

【参考方案2】：

说得更笼统：

flux 是一种用于单向数据流的软件架构。它的链是动作 -> 委派 -> 存储 -> 视图...动作 - 例如按钮单击 - 被委派给保存您的应用程序逻辑和数据的存储...在这里您的动作和数据将被更改和处理。商店最终会发出一个事件，该事件以前通过回调注册过的视图（例如反应组件）。在此回调中，您可以从商店获取数据。值得一提的是，您只能以只读方式访问商店。

因此，对于您的情况...如果您希望组件 A 影响组件 B，您必须将组件 B 注册到商店 eventEmitter 并从商店获取所需的数据。一旦组件 a 触发了一个动作，它就会被委托给 store，你的函数就会被执行，并最终引发事件，从而启动组件 B 的回调。

希望这已经足够清楚了......它的方式更酷一些漂亮的图纸。