javascript - 从概念上讲，如何编写通量存储才能不将不相关的数据混合在一起？

Question

假设我有一个依赖 Flux 的应用程序。

大多数 Flux 教程都会告诉您，您的组件应该监听Store上的change事件并相应地渲染数据。这种方法非常适合小型和简单的用例，但是我在稍微复杂的场景中遇到了问题:

我有一个客户列表，可以按居住城市(华盛顿、纽约等)进行筛选。此列表可在 URL /customers/by-city 下找到，并可以用以下代码表示:

var CustomersList = React.createClass({
 
  getInitialState() {
    return {
      city: 'Washington',
      customers: []
    };
  },
 
  componentWillMount: function() {
    CustomersActions.retrieveForCity(this.state.city);
    CustomersStore.on('change', this.handleNewData);
  },

  componentWillUnmount: function() {
    CustomersStore.off('change', this.handleNewData);
  },

  render: function() {
    return <FilteredTable filters={['city']}
                          onCityChange={this.handleCityChange} 
                          data={this.state.customers} />;
  },

  handleCityChange: function(state) {
    CustomersActions.retrieveForCity(this.state.city);
    this.setState({city: city});
  },
  
  handleNewData: function(customers) {
    this.setState({customers: customers});
  }

});

每次我想按不同的城市进行过滤时，CustomersActions 都会发出 AJAX 请求，响应会发送到 Dispatcher。然后，CustomersStore 选取它，将其存储为数据，并发出 change 事件。几乎是标准的 Flux 东西。

现在，据我所知，没有办法将 change 事件与其实际执行的操作联系起来。想象一下以下场景:

• 我按旧金山过滤表格
• 我改变了主意，在 AJAX 请求完成之前，我单击了一些导航链接(由 React 处理，没有页面重新加载)，最终得到了不同的 url，例如/customers/shortlisted。此 URL 下还有另一个可用组件:ShortlistedCustomers。
• ShortlistedCustomers 与 CustomersList 类似 - 为了显示数据，它通过 CustomerActions 发出 ajax 请求并监听 change CustomersStore 上的 事件
• 现在的技巧部分 - 第二个 ajax 请求在第一个 ajax 请求之前完成，发出两个 change 事件，用户最终在表中得到错误的数据

如何“正确”解决这个问题？我对最简单的解决方案感兴趣，也许是 FB 人员自己推荐的解决方案？我意识到我可以例如取消第一个 AJAX，或者仅按照发出请求的顺序处理响应，但这很快就会失控。

请注意，这个问题并非特定于本案例，而是一个更普遍的问题。例如。如果我想添加更多方法来触发 AJAX 请求，或者更多依赖于同一 Store 的组件，则应该应用该解决方案。

Answer 1

当然，有几种可行的方法可以解决这种情况，每种方法都有自己的优点和缺点。以下是我认为仍然符合 Flux 的一些内容。

请记住，我不知道您的应用的全部范围，因此其中一些可能对您来说不可行。

CustomersStore 监听分派(dispatch)的 API 请求操作

1. 调度一个操作来指示 API 请求已发送
2. 当此操作被调度时，CustomersStore 会清除其状态

对于创建加载状态也很有用。

CustomersStore 将其响应存储在存储桶中

1. 为/by-city 端点请求的数据以“byCity”哈希存储在 CustomersStore 中。
2. /by-city 的组件现在通过指定此哈希来访问其数据，例如 CustomersStore.getData('byCity')
3. /shortlisted 的数据以相同的方式存储和检索

现在您也许可以利用一些缓存逻辑。

创建重置 CustomersStore 的操作

1. 当 CustomersStore 收到此“重置”操作时，它将清除其存储的数据。
2. /by-city 和/shortlisted 组件在适当的生命周期函数中调度“重置”操作。

这也将帮助您在单个组件中处理同样的问题

这些只是一些想法，我相信它们仍然会遵守 Flux 原则。希望这有用!