如何将自动递增的id添加到动态大小的可观察数组中

Question

我使用的是回调，但逻辑与RxJS相同。

我正在制作一个可观察的列表，可以添加到其中，也可以从中删除。我想要自动递增的ID。我不知道将id附加到项目的正确逻辑。

下面是一个只添加事件的简化示例：

import { flatten, map, merge, pipe, scan } from 'callbag-basics';
import just from 'callbag-of';
import remember from 'callbag-remember';
import subscribe from 'callbag-subscribe';
const addEvents = remember(just('add-event', 'add-event')); // remember is shareReplay(1)
const itemIds = pipe(
addEvents,
scan((acc) => acc + 1, 1),
);
const initialReducers = just(() => [{ id: 1, data: 'foo' }]);
const addReducers = pipe(
addEvents,
map(() => pipe(
itemIds,
map((id) => ({ id, data: 'bar' })),
)),
flatten,
map((item) => (prevState) => prevState.concat(item)),
);
const reducers = merge(initialReducers, addReducers);
const states = pipe(
reducers,
scan((acc, reducer) => reducer(acc), null),
);
pipe(
states,
subscribe((state) => {
// Expected
// [{ id: 1, data: 'foo' }]
// [{ id: 1, data: 'foo' }, { id: 2, data: 'bar'}]
// [{ id: 1, data: 'foo' }, { id: 2, data: 'bar'}, { id: 3, data: 'bar'}]
console.log(state);
// Actual
// [{ id: 1, data: 'foo' }]
// [{ id: 1, data: 'foo' }, { id: 2, data: 'bar'}]
// [{ id: 1, data: 'foo' }, { id: 2, data: 'bar'}, { id: 2, data: 'bar'}]
// [{ id: 1, data: 'foo' }, { id: 2, data: 'bar'}, { id: 2, data: 'bar'}, { id: 3, data: 'bar'}]
}),
);

每个附加项目的id从头开始。相反，我希望id与添加的项目数量相匹配。本质上，问题是将正在运行的事件总数附加到事件数据的转换中。如何将自动递增的id添加到动态大小的可观察数组中？

不需要把答案放在callbags表格中。我可以阅读RxJS。谢谢

编辑：我安装了RxJS来转换示例：

const rxjs = require('rxjs');
const { map, mergeMap, scan, shareReplay } = require('rxjs/operators');
const addEvents = rxjs.of('add-event', 'add-event').pipe(
shareReplay(1),
);
const itemIds = addEvents.pipe(
scan((acc) => acc + 1, 1),
);
const initialReducers = rxjs.of(() => [{ id: 1, data: 'foo' }]);
const addReducers = addEvents.pipe(
mergeMap(() => itemIds.pipe(
map((id) => ({ id, data: 'bar' })),
)),
map((item) => (prevState) => prevState.concat(item)),
);
const reducers = rxjs.merge(initialReducers, addReducers);
const states = reducers.pipe(
scan((acc, reducer) => reducer(acc), null),
);
states.subscribe((state) => {
// Expected
// [{ id: 1, data: 'foo' }]
// [{ id: 1, data: 'foo' }, { id: 2, data: 'bar'}]
// [{ id: 1, data: 'foo' }, { id: 2, data: 'bar'}, { id: 3, data: 'bar'}]
console.log(state);
// Actual
// [{ id: 1, data: 'foo' }]
// [{ id: 1, data: 'foo' }, { id: 2, data: 'bar'}]
// [{ id: 1, data: 'foo' }, { id: 2, data: 'bar'}, { id: 2, data: 'bar'}]
// [{ id: 1, data: 'foo' }, { id: 2, data: 'bar'}, { id: 2, data: 'bar'}, { id: 3, data: 'bar'}]
});

Answer 1

不熟悉callbag库，但您尝试过做吗：

map(() => pipe(
itemIds,
map((id,index) => ({ id + index, data: 'bar' })),
)),