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

Question

我正在尝试了解 Facebook 的 Flux...

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

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

目前，我的 Header 组件仅在 HTML div 侧菜单元素上设置一个类，该类通过 CSS 动画隐藏。

这里的总体思路是什么？

Answer 1

ReactJs 并不真正关心它如何获取数据(数据如何传入或如何在 Web 应用程序中处理数据)。这就是 Flux 的用武之地，它创建了一种关于如何处理数据的功能方法。数据流本质上是:

Action -> Data Store -> Component

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

就您而言，您的数据流可能如下所示:

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

您的案例是一个简单的示例，您可能并不真正需要 Flux。我认为如果您有一个维护 View 状态逻辑的父组件，并为 2 个子组件(侧面菜单和标题)使用 props/callbacks，那就更容易了。但是，如果需要进行 ajax 调用并维护 session 的更高级示例，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