如何使用助焊剂商店

时间:2014-12-08 23:25:46

标签: single-page-application reactjs-flux

Flux的大多数示例都使用todo或聊天示例。在所有这些例子中,您存储的数据集有点小并且保存在本地,因此不能确定我的计划商店用途是否符合“通道”的方式。

我打算使用商店的方式有点像ORM存储库。一种以多种方式访问​​数据并将数据持久保存到数据服务的方法,无论可能是什么。

让我们说我正在建立一个项目管理系统。我可能会有这样的方法用于数据检索:

  • getIssueById
  • getIssuesByProject
  • getIssuesByAssignedUser
  • getIssueComments
  • getIssueCommentById
  • 等...

我也有这样的方法来将数据保存到数据服务:

  • addIssue
  • updateIssue
  • removeIssue
  • addIssueComment
  • 等...

我不会做的一件事是本地存储任何问题数据(对于大多数与数据存储相关的商店数据)。大多数数据都很重要,因为自从我上次检索到该问题以来问题状态可能已更新。我的所有数据检索方法都可能总是向最新数据发出API请求。

这是否反对通量“方式”?以这种方式处理流量是否存在任何问题?

1 个答案:

答案 0 :(得分:5)

我不会对术语"存储"过于依赖。如果希望组件呈现某些内容,则需要以某种方式创建应用程序状态。如果您需要在每次发出不同请求时清除该状态,则没有问题。以下是getIssueById()的内容,例如:

  1. 组件调用store.getIssueById(id)
  2. 返回空对象,因为问题不在商店的缓存中
  3. 商店调用action.fetchIssue(id)
  4. 组件呈现空状态
  5. 服务器响应问题数据并调用action.receiveIssue(data)
  6. 存储缓存该数据并调度更改事件
  7. 组件通过调用store.getIssueById(id)
  8. 来响应事件
  9. 返回问题数据
  10. 组件呈现数据
  11. 持久更改将类似,只有最近的服务器响应在商店中保留。

    1. 组件中的用户交互触发action.updateIssue(modifiedIssue)
    2. 存储处理操作,向服务器发送更改
    3. 服务器响应更新的问题并调用action.receiveIssue(data)
    4. ......等等,从上面开始最后4步。

      正如您所看到的,它并不是真正关于数据建模,只是控制它的来来去去。