ionic 3 NGRX-用于状态更改的订阅功能,在单个状态更改中多次调用

时间:2018-06-22 17:20:18

标签: typescript ionic3 ngrx ngrx-store

我有一个ionic 3应用程序,正在使用NGRX跟踪状态。 我的应用程序通过BLE连接到设备。

在我的连接页面(连接到BLE设备)中,我具有以下内容:

 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();
    } 
  }

我偶尔看到的是(在chrome:// inspect中):

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

我不确定这是怎么发生的? “ CONNECTION – connectionStateChangedCount正在增加,但是订阅函数connectionStateChanged被调用两次,而两种情况下connectionStateChangedCount均为1 –背对背?

我还尝试在if语句中用取消订阅替换变量connectionStateChangedCount来“尝试”,并防止再次调用this.device.onConnection()。这也不成功,我偶尔会接到两个电话。

其他一些注意事项:

  1. 这种情况发生时,我看不到对连接页面构造函数的多次调用。
  2. 当我从BLE设备断开连接时,它会显现出来– app.component.ts中的this.nav.setRoot(ConnectionPage)并尝试连接到ConnectionPage(是根目录)上的BLE设备。

关于为什么发生这种情况的任何想法都很棒。

1 个答案:

答案 0 :(得分:0)

事实证明,问题出在当我从一页转到另一页时,NGRX订阅商店仍然存在。当我从另一个页面返回连接页面时,它将再次重新订阅商店,从而导致connectionStateChanged触发两次。

在离开连接页面之前,我现在在ionViewWillLeave()中退订该商店。

这已经清除了我的问题。