如何处理 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 家商店 EmployeeStoreLogEntryStore

问题:如果员工改名,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 应用程序中的关系?的主要内容,如果未能解决你的问题,请参考以下文章

如何处理 React/Flux 中的保存状态?

如何处理 Flux.fromStream 中的异常抛出

Flux:如何处理多个异步请求

如何处理 React / Flux 组件中的状态转换

执行 Flux.map() 时如何处理错误

Flux - 如何处理多个商店更新相同的视图?