Bacon.js (FRP) - Add/remove 数组中的值并保存在存储中

Question

我是 Bacon.js 和 FRP 概念的新手。我正在努力实现非常基本的功能。我在一些本地存储中有一组保存的值：

['A', 'B', 'C']

我有一个异步函数可以从存储中读取这些值 (returns Promise)。

我有 'add' 事件向数组添加新项目，'remove' 事件从数组中删除项目。每次数组更新都应将更新后的数组写入本地存储。

我最终得到了这个解决方案，但它没有按预期工作：

const items = Bacon
    .fromPromise(storage.get('items'))
    .mapError(() => [])
    .merge(Bacon.fromEvent(events, 'add').map(l => [l]))
    .merge(Bacon.fromEvent(events, 'remove').map(l => [l]))
    .skipDuplicates()
    .filter(l => l)
    .toProperty();

items.onValue((items) => {
    // everytime rewrites storage with new array (but without old values)
    console.log(items); 
    storage.put('items', items);
 });

return items;

所以开始时的行为是：

我们从存储中读取数据（没问题）：['A', 'B', 'C']
但是当使用 D 项目触发 'add' 事件时，它不会添加到现有数组中，项目会替换以前的数组值：['D']

培根怎么做？我在考虑 update 方法，但不幸的是它的初始值不应该是流或其他一些异步操作。

Answer 1

使用Bacon.update。您可以使用一个空数组作为初始值，并从您的存储中提供异步初始值作为 Bacon.update 的输入流之一。所以，试试像

const items = Bacon.update([],
  Bacon.fromPromise(storage.get('items')), (_, items) => items,
  Bacon.fromEvent(events, 'add'), (items, newItem) => items.concat(newItem),
  Bacon.fromEvent(events, 'remove'), (items, removedItem) => 
    items.filter((item) => item != removedItem)
)

Bacon.js (FRP) - Add/remove 数组中的值并保存在存储中

Bacon.js (FRP) - Add/remove values from array and save in storage

javascript

functional-programming

frp

rxjs

bacon.js