Javascript 当ngrx中的状态发生变化时调用组件逻辑

我目前正在使用ngrx的redux原理开发一个Angular应用程序

我正在寻找对状态变化做出反应的最佳实践，并根据这种状态调用一些组件逻辑。我会给你一个（简化的）例子来说明我的意思：

减速器.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({ ... })
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 ...
}

示例组件.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({ ... })
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 ...
}

@组件（{…}）
导出类ExampleComponent实现OnInit{
//属性。。。
构造函数（私有存储：存储）{
}
恩戈尼尼特（）{
这个是.subscriptions.push(
this.store.select（fromRoot.getViewTypeOrFilterChanged）.subscribe（（结果）=>{
如果（结果）{
this.property1=result.activeType；
this.dependenthelpersclass.method1（result.activeFilter）；
方法1（）；
方法2（result.activeFilter）；
方法3（）；
}
})
);
}
恩贡德斯特罗（）{
this.subscriptions.forEach（（订阅：订阅）=>{
订阅。取消订阅（）；
});
}
//方法。。。
}

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

问题是，我觉得在这里更像是以发布/订阅模式使用ngrx存储和订阅，感觉不太正确。此外，ngOnInit中的订阅（我有多个订阅）和Ngondestory中的取消订阅也让我感到困扰，但我想不出一种方法，例如使用异步管道来实现相同的结果。 是否有一种更优雅的方式来应对（组合）状态变化

---

谢谢

使用RxJS，您应该将所有内容都视为一个流—以下代码只是一个示例，因为我并不真正了解您的任何UI逻辑，所以请查看代码的结构，而不是逻辑，因为它更像是我的一个非常疯狂的猜测：

@Component({ ... })
export class ExampleComponent implements OnInit {
    private destroyed$ = new Subject<boolean>();

    // the following streams can be used in the controller
    // as well as in the template via | async
    // the .share() is just so the | async pipe won't cause unneccessary stream-creations (the result should be the same regardless of the .share(), it's just a minor performance-enhancement when using multiple | async)
    isLoading$ = this.store.select(fromRoot.isLoading).share();
    activeViewType$ = this.store.select(fromRoot.getActiveViewType).share();
    activeFilter$ = this.store.select(fromRoot.getActiveFilter).share();
    activeViewTypeAndFilter$ = Observable.combineLatest(this.activeViewType$, this.activeFilter$).share();

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

    ngOnInit() {
        this.isLoading$
            .filter(isLoading => !isLoading) // the initial stream will not emit anything until "loading" was false once
            .switchMapTo(this.activeViewTypeAndFilter$)
            .do([viewType, filter] => {
                this.dependentHelperClass.method1(activeFilter);

                this.method1();
                this.method2(activeFilter);
                this.method3();
            })
            .takeUntil(this.destroyed$)  //this stream will automatically be unsubscribed when the destroyed$-subject "triggers"
            .subscribe();
    }

    ngOnDestroy() {
        this.destroyed$.next(true);
        this.destroyed$.complete();
    }

    // methods ...
}

@组件（{…}）
导出类ExampleComponent实现OnInit{
private$=新主题（）；
//控制器中可以使用以下流
//以及通过| async在模板中
//.share（）只是为了使|异步管道不会导致不必要的流创建（无论.share（）如何，结果都应该是相同的，在使用多个|异步时，这只是一个小的性能增强）
isLoading$=this.store.select（fromRoot.isLoading.share（）；
activeViewType$=this.store.select（fromRoot.getActiveViewType.share（）；
activeFilter$=this.store.select（fromRoot.getActiveFilter.share（）；
activeViewTypeAndFilter$=Observable.CombineTest（this.activeViewType$，this.activeFilter$）.share（）；
构造函数（私有存储：存储）{
}
恩戈尼尼特（）{
这是我正在加载的$
.filter（isLoading=>！isLoading）//在“loading”为false之前，初始流不会发出任何内容
.switchMapTo（此.activeViewTypeAndFilter$）
.do（[viewType，filter]=>{
this.dependentPerClass.method1（activeFilter）；
方法1（）；
方法2（活性过滤器）；
方法3（）；
})
.takeUntil（this.destrocted$）//当destrocted$-subject“触发”时，此流将自动取消订阅
.subscribe（）；
}
恩贡德斯特罗（）{
此.next（true）已销毁$；
此.complete$.complete（）；
}
//方法。。。
}

正如我所说：逻辑方面，我不能说这是否是您所需要的，但这只是使用不同的运算符和/或不同的顺序来不同地安排“主流”的问题