离子3 NGRX - 状态变化的订阅功能在单个状态变化时多次调用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了离子3 NGRX - 状态变化的订阅功能在单个状态变化时多次调用相关的知识,希望对你有一定的参考价值。

我有一个离子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语句中的unsubscribe替换变量connectionStateChangedCount来“try”并阻止对this.device.onConnection()的额外调用。这也是不成功的,偶尔我会接到两个电话。

其他一些说明:

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

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

答案

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

在离开连接页面之前,我现在取消订阅ionViewWillLeave()中的商店。

这已经解决了我的问题。

以上是关于离子3 NGRX - 状态变化的订阅功能在单个状态变化时多次调用的主要内容,如果未能解决你的问题,请参考以下文章

ngrx如何订阅组件中的操作或订阅状态

在 angular/ngrx 应用程序中将状态保存到本地存储的逻辑的位置

NGRX - 如何在 Angular 防护中访问我的应用程序状态?

ngrx 中的 reducer 和不变性

ngrx - 更新项目列表中的单个项目

ngRx 状态更新和效果执行顺序