时间戳

首页 > 解决方案 > 无法使用 Ngrx 一次从不同的商店获取最新状态

angular - 无法使用 Ngrx 一次从不同的商店获取最新状态

问题描述

我在我的 Angular 应用程序中使用Ngrx从存储中获取数据。
我创建了多个存储：上下文、决策和状态，以在对象之间创建功能分离。

我有一个案例，UI 需要同时从 2 个不同的商店轮询最新状态，以便它可以启用/禁用一个按钮。

这是一个示例，其中在titi单击按钮后从其他组件更新状态。
我的问题是，使用我的实际代码，我无法获得最新状态this.titi！
这是我的代码：

export class MyComponent implements OnInit, OnDestroy {

   private titi: Titi;
   private toto: Toto;
   private unsubscribe$: Subject<void> = new Subject<void>();

   constructor(private store: Store<State>) {}

   ngOnInit() {

      this.store.pipe(
         select(selectTiti),
         takeUntil(this.unsubscribe$)
      ).subscribe(state => {
         this.titi= state.titi;
      });

      this.store.pipe(
         select(selectTata),
         takeUntil(this.unsubscribe$)
      ).subscribe(state => {
         this.tata= state.tata;
      });

   }

   public isBtnDisabled() {
      return this.titi === 'latest value of titi' && this.tata === 'latest value of tata';
   }

   ....

   ngOnDestroy(): void {
     this.unsubscribe$.next();
     this.unsubscribe$.complete();
   }
}

和用户界面：

<button [disabled] = 'isBtnDisabled()'></button>

标签： angularngrxngrx-storeredux-observable

解决方案

您可以使用更被动的方式来做到这一点。通过使用 combineLatest，如果值更改为存储，您将获得每个选择器的最新值：

isDisabled$ = combineLatest(
  this.store.select(selectTiti),
  this.store.select(selectTata)
).pipe(
  map(([titi, tata]) => // do whatever you want to check the disabled status)
);

您可以在模板中使用异步管道进行订阅，这样您就不必依赖手动取消订阅组件：

<button [disabled] = 'isDisabled$ | async'></button>

所以最终的组件应该是这样的：

export class MyComponent {

  public isDisabled$: Observable<boolean> = combineLatest(
  this.store.select(selectTiti),
  this.store.select(selectTata)
  ).pipe(
    map(([titi, tata]) => // do whatever you want to check the disabled status)
  );

   constructor(private store: Store<State>) {}
}

推荐阅读