Flux 设计模式中的简单数据获取

Question

Flux 设计模式对简化我的 Web 应用程序有很大帮助。然而，我最终在某些情况下直接调用 Web API，只是因为 Flux 似乎对这项工作来说太过分了。我想知道其他人如何以 Flux 的方式解决此类问题。

如图所示，我们通过 Action Creator 为所有 Web API 调用创建了 Action。我将给出一个示例场景。假设目前有 3 个组件对用户存储更改感兴趣。用户单击其中一个以从后端加载用户的爱好列表。但由于用户的操作，我只希望一个特定的 UI 组件显示爱好列表。其他 2 个组件根本不会改变。传统上，这将是一个简单的带有回调的几行异步调用。如果您要为此虔诚地关注 Flux，

1. 您通过具有特定参考 ID 的 Action Creator 创建操作
2. 通过 Web API 获取数据
3. 收到数据后，使用 Action Creator 创建动作
4. 用户存储侦听通过操作到达的此结果
5. 更新商店
6. Fire store 更新事件，所有 3 个组件都会对此做出反应，并使用参考 ID 检查这是否适用于我
7. 然后最终使用从该 1 个 UI 组件中获取的数据进行渲染

我的应用程序有许多小部分，可以像每个用户操作一样动态加载数据，我决定将 Flux 用于许多组件必须与之共享状态的东西，因为商店充当集中状态提供者。你们如何使用 Flux 来进行上述简单的数据提取？

Answer 1

有几种方法可以解决这个问题。

1. 让所有组件接收更新，由组件决定是更新还是忽略更新。
2. 拆分您的商店并仅订阅组件中需要的商店。这种方法可能会导致商店相互依赖以及同时配送问题变得混乱。

如果您还没有使用任何通量库，强烈推荐redux。它通过允许组件订阅状态（存储）树的一部分来解决这个问题。