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

@BrentAshWilliams wrote:

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);
    store.select(s => 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);
      this.device.onConnection();
    } 
  }

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.

Posts: 1

Participants: 1

Read full topic