1

如何使用 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吗？这对我来说似乎效率低下。

我该如何处理？

4

1 回答 1

0

这是一个很难回答的问题，因为解决方案取决于什么最适合您的应用程序以及数据的结构。我发现的最佳方法是以类似于构建数据库的方式来考虑，例如围绕最常见的更新/查询来构建您的商店。

在您的情况下，日志似乎更有可能被更新而不是员工将被改变。我只需在您的员工和日志存储中监听这两个事件，让 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

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

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

于 2015-05-01T23:42:57.027 回答