0

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

假设我的操作如下所示：

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();
  }

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

4

1 回答 1

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;
};

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

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

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

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

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

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

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

于 2015-08-12T00:13:21.040 回答