Angular + Ngrx：select 组件和函数中值的最佳实践

Question

我的问题与 ngrx get value in function 中的问题几乎相同，但我想知道答案（请参阅该主题中的评论）是否仍然是当今的最佳做法。

我的情况是：

我想从商店中获取 2 个值以显示在我的组件中 --> 我使用选择器和异步管道
我需要将这些相同的值传递给 Angular Material 对话框，以便在对话框组件中使用它们。

我有一个可行的解决方案：我在 ngOnInit() 中使用订阅函数，并使用来自 Observable 的值设置一个局部变量。所以我不需要再使用异步管道，我可以轻松地将值传递给某些函数......这听起来是最好的选择，但我到处寻找答案我看到 "avoid using subscriptions".

所以我想知道：

有没有更好的方法来处理这种情况？
或者这是"the ngrx/rxjs way of handling this scenario"？
或者我是否使用选择器 Observable 和异步管道来显示组件中的值并订阅 Observable 以创建一个局部变量来传递给我的函数（这似乎有点多余...）
或者...?

我的问题是我想要一种一致的方法来处理 ngrx 值，但现在看来我需要根据情况使用 2 种方法：

用于在组件中显示值的异步管道（根据社区的首选方法）
在本地函数中使用值时订阅（社区建议不要使用订阅"unless necessary"）

（令我惊讶的是：在互联网上很难找到明确的答案......）

Answer 1

对，您需要避免订阅。将 async 管道与 as 一起使用，理想情况下，您的代码中会有 0 个订阅。

在组件 class 中，我们创建了一个从存储中选择数据的流

export class MyComponent implements OnDestroy {
    public readonly data$: Observable<{
        user: User,
        items: Array<Item>,
    }>;

    constructor(protected readonly store: Store<StoreState>) {
        this.data$ = combineLatest([
            this.store.select(currentUser),
            this.store.select(someItems),
        ]).pipe(
            map(([user, items]) => ({
                user,
                items,
            })),
        );
    }

    public submit(user: User, item: Item): void {
        // some logic here
    }
}

然后在它的模板中我们有一个包装器来解析它。

<ng-container *ngIf="data$ | async as data">
    <div>header</div>
    <button *ngFor="let item of data.items" (click)="submit(data.user, item)">{{data.user.name}} {{item.name}}</button>
    <div>footer</div>
</ng-container>

Angular + Ngrx：select 组件和函数中值的最佳实践

Angular + Ngrx : best practice to select a value in component and in function

redux

ngrx

angular

angular-ngrx-data

rxjs-observables