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.

来源

2017-06-17 Erik Nijland

我找到了配对操作。但不能让它工作。除此之外，我认为它不适合初始化，因为它只会在第二个'tick'触发。 –

我不太明白。你想有两个商店跟踪添加和其他删除？ – Skeptor

不，我当然不想在商店中记录我的更改。商店应该只有当前的状态。我只想知道是否有一个RxJS操作符显示与以前到当前状态的差异（或者只是将它们返回，以便我可以自己找出差异）。 –

你可以用这个办法的办法：

减速机：

{ 
    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));

来源

2017-06-17 17:19:27

感谢您的建议。但我希望有另一种方式，这样我可以保持我的应用程序状态与事件日志分开。 –

RxJS订阅阵列：查看更改

回答

相关问题