如何处理 Flux 应用程序中的关系?
Posted
技术标签:
【中文标题】如何处理 Flux 应用程序中的关系?【英文标题】:How to handle relationships in a Flux application? 【发布时间】:2015-04-23 23:35:16 【问题描述】:如何使用 Flux 处理关系?
假设我有一个Employee
id: 1
name: "Employee",
position: "Manager"
我从服务器 api 中检索到一些日志条目,这些条目引用了员工
[
id: 1,
subject: "Subject",
employee:
id: 1
name: "Employee",
position: "Manager"
,
id: 2,
subject: "Subject",
employee:
id: 1
name: "Employee",
position: "Manager"
]
目前我有 2 家商店 EmployeeStore
和 LogEntryStore
。
问题:如果员工改名,EMPLOYEE_UPDATED
事件将被触发,EmployeeStore
将更改员工,但LogEntryStore
仍将有“过时”员工。
每个有关系的商店都应该听EMPLOYEE_UPDATED
吗?这对我来说似乎效率低下。
我应该如何处理?
【问题讨论】:
【参考方案1】:这是一个很难回答的问题,因为解决方案取决于什么最适合您的应用程序以及数据的结构。我发现的最佳方法是以类似于构建数据库的方式来考虑,例如围绕您最常见的更新/查询构建您的商店。
在您的情况下,日志更新的可能性似乎比员工改变的可能性更大。我只需在您的员工和日志存储中监听这两个事件,让 logStore 在员工更改时更新所有相关日志。所以是的,每个依赖于employeeStore 的商店都会监听与员工相关的更新。像fluxxor 这样的框架通过允许商店监听其他商店来解决这个问题。 logStore 中的调度处理程序示例
handleChange: function (type, payload)
switch (type)
case 'EMPLOYEE_UPDATED':
dispatcher.waitFor([employeeStore.dispatchToken]);
Object.keys(this._items).forEach(function (key)
var log = this._items[key];
log.employee = employeeStore.get(log.employee.id);
.bind(this));
this.emitChange();
break
case 'LOG_UPDATE':
dispatcher.waitFor([employeeStore.dispatchToken]);
payload.data.forEach(this.getEmployeesForLog.bind(this));
this.emitChange();
break;
这是一个使用您的数据集的工作示例: jsbin
另一种方法是让与您的商店相关的任何控制器/视图监听相关商店并为其自身或其子视图构建数据,但似乎最好让商店自己负责。
作为参考,以下问题可能会有所帮助。
at what nesting level should components read from entities from stores how do I handle nested api responses in a flux application【讨论】:
以上是关于如何处理 Flux 应用程序中的关系?的主要内容,如果未能解决你的问题,请参考以下文章