javascript - 当数据缓存在本地时，回流避免每次都命中服务器

Question

我很好奇是否有任何商定的模式来检查数据在访问服务器之前是否已加载。

假设我的操作如下所示:

Actions.loadRequest.preEmit = function () {
  $.get('/store/', function (data) {
      Actions.loadSuccess(data);
  }.bind(this));
}

这是从一个组件调用的，该组件只是说给我这个数据:但如果该数据已经在商店中，我不想访问服务器。我应该将检查存储的逻辑存储在组件中吗:

render: function () {
  var data = this.state.store.data;
  if (!data) {
    Actions.loadRequest();
  }

有没有更好的方法来解决这个问题？

Answer 1

在我的项目中，我使用 shouldEmit 来实现此目的(请参阅 https://github.com/reflux/refluxjs#action-hooks )。我的代码示例:

var streamStore = Reflux.createStore({
    [...]
});

actions.loadStream.shouldEmit = function(streamId) {
    if(streamId in streamStore.data)
        return false;
    return true;
};

它与存储定义位于同一文件中。我认为这在概念上是正确的方法，因为商店保存数据，所以商店应该负责拦截加载更多数据的请求并说不这样做，就像它负责监听说有更多数据可用并更新的操作一样本身。

不幸的是，这不适用于您的示例，因为您将 AJAX 调用绑定(bind)到 preEmit，它在 shouldEmit 之前调用。我建议重构以在正常的 listen 调用中进行 API 调用，如下所示:

Actions.loadRequest.listen(function () {
  $.get('/store/', function (data) {
      Actions.loadSuccess(data);
  }.bind(this));
});

这可以节省preEmit，以应对在发出操作之前需要重写操作参数的罕见情况。我确实在代码中使用了这种模式，例如在加载第二页结果时，它依赖于第一页附带的 next token ，因此位于商店中。但在“触发操作，因此发出请求”的一般简单情况下，使用 listen 更有意义，因为这样您就可以添加 preEmit 和 shouldEmit > 对于更高级的行为，例如您想要的缓存。

Reflux 还有一个辅助函数 listenAndPromise，它进一步简化了“触发操作，进行 AJAX 调用，然后在完成时触发另一个操作”的常见用例。你的例子可以变成:

Actions.loadRequest.listenAndPromise(function () {
    return $.get('/store/');
});    

有关如何设置的详细信息，请参阅文档的这一部分:https://github.com/reflux/refluxjs#asynchronous-actions