NGRX Effect “rxjs reducer operator” stop the observable chain

Question

I am working on an Angular project with NGRX store and effect inside. I got a problem when using rxjs reducer operator, the observable chain somehow was stopped. No errors are shown on the console.

@Injectable()
export class MyEffects {
    @Effect()
    public grouping$: Observable<Action> = this.actions$.pipe(
        ofType(FIRST_ACTION),
        map((action) => action.payload),
        flatMap(i => i),
        groupBy((i) => i.code),
        flatMap(group$ => {
            return group$.pipe(
                reduce((acc, curr) => {
                    acc.push(curr);
                    console.log('%c curr', 'background-color:green;color:#fff', curr);
                    console.log('%c acc', 'background-color:green;color:#fff', acc);
                    return acc;
                }, []),
                tap(grpArr => console.log('group array', grpArr))
            );
        }),
        switchMap((data) => {
            return [new AnotherAction()];
        })
    );
}

My concern is on the line

tap(grpArr => console.log('group array', grpArr))

The reducer operators logs the right output in the console. But when I tap the result, they are not showing. And of course the last switchMap operator not trigger since the chain is stopped. Am I missing something here?

Console output for reducer operator

what do you mean by results are not showing? how you are printing results? — rijin
@rijin i log it using tap operator after the reducer tap(grpArr => console.log('group array', grpArr)) — snso

martin martin · Accepted Answer · 2018-12-29T13:43:32

It looks like you want to be using scan instead of reduce because reduce will emit the accumulated value only when its source completes.

However, this.actions$ never completes so group$ never completes and thus reduce never emits anything.

On the other hand scan will emit each intermediate result. I don't know if that's what you want so you might have to chain with filter or something.

NGRX Effect “rxjs reducer operator” stop the observable chain

1 Answers