如何处理 Flux 应用程序中的关系？答案

【问题标题】：How to handle relationships in a Flux application?如何处理 Flux 应用程序中的关系？
【发布时间】：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吗？这对我来说似乎效率低下。

我应该如何处理？

【问题讨论】：

标签： design-patterns reactjs flux

【解决方案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

另一种方法是让与您的商店相关的任何控制器/视图监听相关商店并为其自身或其子视图构建数据，但似乎最好让商店自己负责。

作为参考，以下问题可能会有所帮助。

【讨论】：