javascript - 在 Bacon FRP 流中组装分页的 ajax 数据

Question

我正在使用 Bacon.js 学习 FRP，并希望从流中的分页 API 组装数据。

使用数据的模块有一个这样的消费API:

// UI module, displays unicorns as they arrive
beautifulUnicorns.property.onValue(function(allUnicorns){
  console.log("Got "+ allUnicorns.length +" Unicorns");
  // ... some real display work
});

组装数据的模块从 API 请求顺序页面，并在每次获得新数据集时推送es 到流中:

// beautifulUnicorns module
var curPage = 1
var stream = new Bacon.Bus()
var property = stream.toProperty()
var property.onValue(function(){}) # You have to add an empty subscriber, otherwise future onValues will not receive the initial value. https://github.com/baconjs/bacon.js/wiki/FAQ#why-isnt-my-property-updated

var allUnicorns = [] // !!! stateful list of all unicorns ever received. Is this idiomatic for FRP?

var getNextPage = function(){
  /* get data for subsequent pages.
     Skipping for clarity */
}

var gotNextPage = function (resp) {
  Array.prototype.push.apply(allUnicorns, resp) // just adds the responses to the existing array reference
  stream.push(allUnicorns)
  curPage++
  if (curPage <= pageLimit) { getNextPage() }
}

我如何以一种能为我提供曾经收到的所有独 Angular 兽的完整列表的方式订阅流？这是flatMap吗或类似的？我不认为我需要一个新的流，但我不知道。对不起，我是 FRP 思维方式的新手。需要明确的是，组装数组是有效的，只是感觉我没有做惯用的事情。

我没有为此使用 jQuery 或其他 ajax 库，所以这就是为什么我没有使用 Bacon.fromPromise 的原因

您可能还想知道为什么我的消费模块需要整个集合而不是增量更新。如果它只是附加行可能没问题，但在我的例子中它是一个无限滚动并且如果两者都应该绘制数据:1.数据可用和2.区域在屏幕上。

Answer 1

这可以通过 .scan() 来完成方法。而且你还需要一个流来发出一页的项目，你可以用 .repeat() 创建它.

这是一个草稿代码(抱歉，没有测试过):

var itemsPerPage = Bacon.repeat(function(index) {
  var pageNumber = index + 1;
  if (pageNumber < PAGE_LIMIT) {
    return Bacon.fromCallback(function(callback) {
      // your method that talks to the server 
      getDataForAPage(pageNumber, callback); 
    });
  } else {
    return false;
  }
});

var allItems = itemsPerPage.scan([], function(allItems, itemsFromAPage) {
  return allItems.concat(itemsFromAPage);
});


// Here you go
allItems.onValue(function(allUnicorns){
  console.log("Got "+ allUnicorns.length +" Unicorns");
  // ... some real display work
});

如您所见，您也不需要 .onValue(function(){}) hack 和 curPage 外部状态。