RxJS 订阅数组：查看更改答案

【问题标题】：RxJS subscribe to array: see the changesRxJS 订阅数组：查看更改
【发布时间】：2017-06-17 16:53:33
【问题描述】：

我正在使用 ngrx/store 来跟踪一组活动层（显示在地图上）。

{
  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中。

这些只是我的第一步。在我的最终应用程序中，我想支持可以添加、删除但也可以移动的航路点。当移动一个航点时，我需要在数组中读取它之前和之后的航点以操纵（计算和重绘）路线。

更新：显然有一个用于 RxJS 的 Observable.ofArrayChanges，但它在 RxJS 5 中已被弃用。

【问题讨论】：

我找到了pairwise operator。但不能让它工作。除此之外，我认为它不适合初始化，因为它只在第二个“tick”时触发。
我不太明白。您想拥有两家商店，一家跟踪添加和其他删除？
不，我当然不想在商店中记录我的更改。商店应该只有当前状态。我只是想知道是否有一个 RxJS 运算符可以显示从前一个状态到当前状态的差异（或者只是将它们都返回，以便我自己找出差异）。
那么你应该有两个商店。一个是临时的，另一个是永久的。您的组件将看到差异并执行另一个操作来合并更新永久存储。使用运算符我看不到它的可能

标签： angular rxjs ngrx-store

【解决方案1】：

你可以这样接近：

减速机：

{
  layers: ['layer_1', 'layer_2'],
  changesInLayer: { type: 'ADD', layers: ['layer_1', 'layer_2']}
}

行动：

添加层：

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

【讨论】：

感谢您的建议。但我希望有另一种方法可以让我的应用程序状态与事件日志分开。