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訂閱陣列：查看更改

回答

相關問題