3

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

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

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

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

这里的总体思路是什么？

4

2 回答 2

2

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
于 2014-12-02T00:59:01.453 回答
0

说得更笼统：

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

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

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

于 2014-12-01T23:26:48.413 回答