Question

我目前正在使用带有nxx的redux原理开发Angular应用程序。

我正在寻找对状态更改做出反应的最佳做法，并根据此状态调用某些组件逻辑。我会给你一个（简化的）例子，说明我的意思：

reducers.ts

import {createSelector} from 'reselect';

export const getViewTypeOrFilterChanged = createSelector(isLoading, getActiveViewType, getActiveFilter, (isLoading, activeViewType, activeFilter) => {
    // ensure that data is loaded
    if (!isLoading) {
        return {
            activeViewType: activeViewType,
            activeFilter: activeFilter
        };
    }
});

示例-component.ts

@Component({ ... })
export class ExampleComponent implements OnInit {

    // properties ...

    constructor(private store: Store<fromRoot.AppState>) {
    }

    ngOnInit() {
        this.subscriptions.push(
            this.store.select(fromRoot.getViewTypeOrFilterChanged).subscribe((result) => {
                if (result) {
                    this.property1 = result.activeType;
                    this.dependentHelperClass.method1(result.activeFilter);

                    this.method1();
                    this.method2(result.activeFilter);
                    this.method3();
                }
            })
        );
    }

    ngOnDestroy() {
        this.subscriptions.forEach((subscription: Subscription) => {
            subscription.unsubscribe();
        });
    }

    // methods ...
}

正如您所看到的，我还使用reselct在选择器中组合三个不同的状态切片（getViewTypeOrFilterChanged）。在订阅此选择器时，我想根据组合状态采取一些操作。

问题是，我觉得在这里以发布/订阅模式的方式更多地使用ngrx商店和订阅，感觉不太正确。 ngOnInit中的订阅（我有多个订阅）和ngOnDestroy中的取消订阅困扰我，但我无法想到使用例如使用例如的方法获得相同结果的方法。异步管道。是否有更优雅的方式对（组合）状态变化作出反应？

谢谢！

Answer 1

使用RxJS，您应该将所有内容都视为一个流 - 下面的代码就是一个例子，因为我真的不知道您的任何UI逻辑，所以只看结构而不是代码的逻辑因为它更像是我的猜测：

Level

正如我所说的那样：逻辑方面我不能说这是否是你所需要的，但这只是一个使用不同运算符和/或不同顺序排列你的“主流”的问题。

在ngrx中状态发生变化时调用组件逻辑

1 个答案: