如何使用助焊剂商店

rya*_*zec 3 single-page-application reactjs-flux

Flux的大多数示例都使用todo或聊天示例.在所有这些示例中,您存储的数据集有点小并且保留在本地,因此不能确定我的计划使用的商店是否与通量"方式"一致.

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

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

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

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

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

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

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

小智 5

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

  1. 组件调用store.getIssueById(id)
  2. 返回空对象,因为问题不在商店的缓存中
  3. 商店调用action.fetchIssue(id)
  4. 组件呈现空状态
  5. 服务器响应问题数据并调用action.receiveIssue(data)
  6. store缓存该数据并调度change事件
  7. 组件通过调用store.getIssueById(id)来响应事件
  8. 问题数据被返回
  9. 组件呈现数据

持久更改将类似,只有最新的服务器响应在商店中保留.

  1. 组件中的用户交互触发action.updateIssue(modifiedIssue)
  2. store处理操作,向服务器发送更改
  3. 服务器响应更新的问题并调用action.receiveIssue(data)

...等等,从上面的最后4个步骤.

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