How to get only first value in ngrx action in angular component?

Question

Problem: I need to get response. At first will be called:

        this.store.dispatch(new UpdateRequest(data));

then, if success, response will be in :

        this.actions.pipe(ofType(ActionTypes.UPDATE_SUCCESS))

or if error:

        this.actions.pipe(ofType(ActionTypes.UPDATE_ERROR))

before ngrx it was easy:

this.service.update(data).subscribe((data) => this.update(data)));

with ngrx : A) without take(1):

        this.store.dispatch(new UpdateRequest(data));

    const success$ = this.actions.pipe(ofType(ActionTypes.UPDATE_SUCCESS))
        .pipe(
            takeUntil(this.destroy$),
        )
        .subscribe(() => {
            this.update();
            success$.unsubscribe();
            error.unsubscribe();
        });

    const error$ = this.actions.pipe(ofType(ActionTypes.UPDATE_ERROR))
        .pipe(
            takeUntil(this.destroy$),
        )
        .subscribe(() => {
            this.error();
            success$.unsubscribe();
            error.unsubscribe();
        });

B) with take(1): this.store.dispatch(new UpdateRequest(data));

    const success$ = this.actions.pipe(ofType(ActionTypes.UPDATE_SUCCESS))
        .pipe(
            take(1),
            takeUntil(this.destroy$),
        )
        .subscribe(() => {
            this.update();
            error.unsubscribe();
        });

    const error$ = this.actions.pipe(ofType(ActionTypes.UPDATE_ERROR))
        .pipe(
            take(1),
            takeUntil(this.destroy$),
        )
        .subscribe(() => {
            this.error();
            success$.unsubscribe();
        });

And in ngOnDestroy:

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

But in ngrx take(1) is forbidden for action : https://github.com/cartant/eslint-plugin-rxjs/blob/main/docs/rules/no-unsafe-first.md

So, maybe you know better way of subscribing only first value in actions.

score 0 · Answer 1 · answered Sep 13 '21 at 15:14

You can use take(1) in your case, because you're using the actions$ outside the @Effect.

The mentioned forbidden is related to complete the effect observable, which will cause the effect to not handle the action anymore:

Avoid completing effects and epics. This rule effects failures if first is used in an effect or epic in a manner that will complete the outermost observable.

How to get only first value in ngrx action in angular component?

1 Answers1