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

时间:2016-06-18 14:31:55

标签: reactjs flux reactjs-flux

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

enter image description here

如图所示,我们通过Action Creator为所有Web API调用创建了Action。我将举一个例子。我们假设目前有3个组件对User Store的变化感兴趣。用户单击其中一个以从后端加载用户兴趣爱好列表。但是我只希望只有一个特定的UI组件才能显示由于用户操作引起的爱好列表。其他两个组件根本没有变化。传统上,这将是一个简单的几行异步调用回调。如果你为了这个而虔诚地关注Flux,

  1. 您可以通过具有特定参考ID
  2. 的Action Creator创建操作
  3. 通过Web API获取数据
  4. 收到数据后,使用Action Creator
  5. 创建操作
  6. 用户商店通过操作
  7. 收听此结果
  8. 更新商店
  9. Fire store更新事件,所有3个组件都对此做出反应,并使用参考ID
  10. 检查是否为我的
  11. 然后最终使用在该1个UI组件中提取的数据进行渲染
  12. 我的应用程序有很多小部件可以像每个用户操作一样动态加载数据,我决定将Flux用于很多组件必须共享状态的东西,因为这些存储充当了集中状态提供者。你们如何使用Flux进行简单的数据提取,如上所述?

1 个答案:

答案 0 :(得分:0)

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

  1. 让所有组件都接收更新,组件决定是更新还是忽略更新。
  2. 拆分商店并仅订阅组件中需要的商店。这种方法可能会因为商店彼此依赖以及同时发送问题而变得混乱。
  3. 如果您没有使用任何助焊剂库,强烈建议使用redux。它通过允许组件订阅状态(存储)树的一部分来解决这个问题。