Ionic 3 NGRX - subscription function for state change called multiple times on single state change


I have an ionic 3 application that I am using NGRX to keep track of states. My app connects over BLE to a device.

In my connection page (connecting to a BLE device), I have the following:

 private connectionStateChangedCount: number;

  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              private device: DeviceActionsDispatcherProvider) {
    this. connectionStateChangedCount = 0;
    console.log('CONNECTION - constructor ' + this. connectionStateChangedCount); => s.connection).subscribe(this.connectionStateChanged.bind(this));

  //  I only want this.device.onConnection() called ONCE when the deviceConnectionState is “connected
  connectionStateChanged(connectionStore: any) {  
    if (connectionStore.deviceConnectionState === 'connected' && 
        this. connectionStateChangedCount === 0) {
      this.connectionStateChangedCount = this. connectionStateChangedCount + 1;
      console.log('CONNECTION – connectionStateChanged  ' + this. connectionStateChangedCount);

What I am seeing is that occasionally (in chrome://inspect):

connection.ts:67  CONNECTION – connectionStateChanged 1 
connection.ts:67 'CONNECTION – connectionStateChanged 1

I am not sure how this is occurring? 'CONNECTION – connectionStateChangedCount is being incremented, yet the subscription function connectionStateChanged is being called twice with connectionStateChangedCount being 1 in both cases – back-to-back?

I also tried replacing the variable connectionStateChangedCount with an unsubscribe in the if statement to “try” and prevent an additional call to this.device.onConnection(). This was also unsuccessful, where I occasionally get the two calls.

Some other notes:

  1. I don’t see multiple calls to the connection page constructor when this occurs.

  2. It manifests itself when I disconnect from the BLE device – this.nav.setRoot(ConnectionPage) in app.component.ts and try to connect to the BLE device on the ConnectionPage (which is the root).

Any ideas as to why this is occurring would be great.


It turns out that the issue was when I went from one page to another the NGRX subscribe to store(s) was still in place. When I went back to the connection page from another page it would re-subscribe to the store again causing the connectionStateChanged to fire twice.

Prior to leaving the connection page I now unsubscribe to the store in ionViewWillLeave().

This has cleared up my issue.