当ngrx中的状态更改时调用组件逻辑

Question

I'm currently developing an application with Angular using redux principle with ngrx.

I'm looking for a best practice for reacting to state changes and call some component logic depending on this state. I'll give you an (simplified) example to make clear what I mean:

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
        };
    }
});

example-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 ...
}

As you can see I'm also using reselct to combine three different slices of state within a selector (getViewTypeOrFilterChanged). In the subscription to this selector I then want to take some actions according to the combined state.

The thing is, I'm feeling like using ngrx store and subscriptions more in a way of publish/subscribe pattern here and it feels not quite correct. Also the subscriptions (I have multiple ones) in ngOnInit and unsubscriptions in ngOnDestroy bother me, but I can't think of a way achieving the same results using eg async pipe. Is there maybe a more elegant way of reacting to (combined) state changes?

Thanks!

Answer 1

With RxJS you should think of everything as a stream - the following code is just as an example, because I don't really know any of your UI-logic so just look at the structure and not at the logic of the code, since it's more like a very wild guess of mine:

@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 ...
}

As I said: logic-wise I cannot say if this is what you need, but that's just a question of using different operators and/or a different order to arrange your "main-stream" differntly.