RxJS订阅阵列:查看更改
问题描述:
我正在使用ngrx/store来跟踪活动图层的数组(要在地图上显示)。RxJS订阅阵列:查看更改
{
layers: ['layer_1', 'layer_2']
}
在我的组件我订阅了这个变量:
this.mapState$
.map(mapState => mapState.layers)
.subscribe(layers=> console.log(layers));
现状
当添加layer_3得到
['layer_1', 'layer_2', 'layer_3']
拆卸时layer_2我得到
['layer_1', 'layer_3']
我尽量做到 而是一个阵列与现状。我想要两个数组。一个与所有补充和一个与所有清除。
欢迎使用不同的方法。关键是我想将它存储在ngrx/store中。
这些只是我的第一步。在我的最终应用程序中,我想支持航点,可以添加,移除但也移动。而当移动一个航点时,我需要在数组之前和之后读取航点,以操纵(计算并重绘)一条航线。
更新:apparantly有用于RxJS的Observable.ofArrayChanges但它已在RxJS被弃用5.
答
你可以用这个办法的办法:
减速机:
{
layers: ['layer_1', 'layer_2'],
changesInLayer: { type: 'ADD', layers: ['layer_1', 'layer_2']}
}
操作:
ADD_LAYER:
{
layers: [...this.state.layers, action.payload],
changesInLayer: { type: 'ADD', layers: [action.payload]}
}
REMOVE_LAYER:
{
layers: this.state.layers.filter(item => {
return item !== action.payload
}),
changesInLayer: { type: 'REMOVE', layers: [action.payload]}
}
组件:
this.mapState$
.subscribe(state => console.log(state.layers, state.changesInLayer));
+0
感谢您的建议。但我希望有另一种方式,这样我可以保持我的应用程序状态与事件日志分开。 –
我找到了配对操作。但不能让它工作。除此之外,我认为它不适合初始化,因为它只会在第二个'tick'触发。 –
我不太明白。你想有两个商店跟踪添加和其他删除? – Skeptor
不,我当然不想在商店中记录我的更改。商店应该只有当前的状态。 我只想知道是否有一个RxJS操作符显示与以前到当前状态的差异(或者只是将它们返回,以便我可以自己找出差异)。 –