The Scan & Reduce Operators in Angular applies an accumulator function on the values of the source observable. The Scan Operator returns all intermediate results of the accumulation, while Reduce only emits the last result. Both also use an optional seed value as the initial value.
The scan operator applies an accumulator function over the values emitted by the source Observableble sequentially and emits each value.
Syntax
scan<T, R>(accumulator: (acc: R, value: T, index: number) => R, seed?: T | R): OperatorFunction<T, R>
Where
The accumulator function gets three argument.
acc is the accumulator variable where the values are
accumulated.
value comes from the source observable
index of the value.
The initial value for the acc comes from the seed.
When the first value arrives from the source, the scan operator invokes the accumulator function on these two variables and emits the result.
When the second value arrives from the source, the result of the previous step becomes the input (acc ). The scan emits a new result, which then becomes the input for the third emission.
This cycle continues till the stream completes.
In the example below (acc, value) => acc + value is the accumulator function. Seed is 0.
import { Component } from "@angular/core";
import { map, scan } from "rxjs/operators";
import { interval, of } from "rxjs";
@Component({
selector: "my-app",
template: `
<h1>Scan Operator Example</h1>
`,
styleUrls: ["./app.component.css"]
})
export class AppComponent {
reTryCount = 0;
ngOnInit() {
of(1, 2, 3, 4, 5)
.pipe(scan((acc, value) => acc + value, 0))
.subscribe(
val => console.log(val),
e => console.log(e),
() => console.log("Complete")
);
}
}
***Console***
1
3
6
10
15
Complete
The value for acc starts with the seed value i.e. 0. The variable value gets the value 1, which is the first value emitted by the source. The scan operator runs the accumulator function (acc + value = 1) and emits the result.
The result of the previous accumulator function becomes the input (acc) of the next scan. It is added to the next value (i. e. 2) emitted from the source and the result becomes 3.
This will continue until we reach the end of sequence
In the following code, we change the seed to 10. Now the accumulator starts with 10 instead of 0.
of(1, 2, 3, 4, 5)
.pipe(scan((acc, value) => acc + value, 10))
.subscribe(
val => console.log(val),
e => console.log(e),
() => console.log("Complete")
);
*** Result ***
11
13
16
20
25
Complete
of(1, 2, 3, 4, 5)
.pipe(scan((acc, value) => [...acc, value], []))
.subscribe(
val => console.log(val),
e => console.log(e),
() => console.log("Complete")
);
*** Console ***
[1]
[1, 2]
[1, 2, 3]
[1, 2, 3, 4]
[1, 2, 3, 4, 5]
import { Component, ElementRef, ViewChild } from "@angular/core";
import { map, scan } from "rxjs/operators";
import { fromEvent, interval, of, Subscription } from "rxjs";
@Component({
selector: "my-app",
template: `
<h1>Scan Operator Example</h1>
<button #btn>Button</button>
`,
styleUrls: ["./app.component.css"]
})
export class AppComponent {
@ViewChild("btn", { static: true }) button: ElementRef;
sub: Subscription;
ngAfterViewInit() {
this.sub = fromEvent(this.button.nativeElement, "click")
.pipe(scan((acc, value) => acc + 1, 0))
.subscribe(val => console.log("You clicked " + val + " times"));
}
ngOnDestroy() {
this.sub.unsubscribe();
}
}
The Reduce operator applies an accumulator function over the values emitted by the source Observation sequentially and returns the accumulated result when the source completes.
The Reduce operator behaves exactly like the scan operator, except for the following differences
The following example is similar to the scan example above. The only difference is that you will not see the intermediate results i.e. 1, 3, 6 10.
ngOnInit() {
of(1, 2, 3, 4, 5)
.pipe(reduce((acc, value) => acc + value, 0))
.subscribe(
val => console.log(val),
e => console.log(e),
() => console.log("Complete")
);
}
** Console **
15
Complete
ngOnInit() {
of(1, 2, 3, 4, 5)
.pipe(reduce((acc, value) => [...acc, value], []))
.subscribe(
val => console.log(val),
e => console.log(e),
() => console.log("Complete")
);
}
** Console ***
[1, 2, 3, 4, 5]
Complete
The Reduce operator emits only if the observable completes. Hence in the Tracking button click example, just replacing the scan with the reduce will not work.
In the following example, we create a new observable using the Subject and emit the click event using the event binding. This allows us to raise the complete notification.
import { Component, ElementRef, ViewChild } from "@angular/core";
import { map, reduce, scan } from "rxjs/operators";
import { fromEvent, interval, of, Subject, Subscription } from "rxjs";
@Component({
selector: "my-app",
template: `
<h1>Reduce Operator Example</h1>
<button (click)="clickMe($event)">Click Me</button>
<br />
<br />
<br />
<button (click)="startCounting($event)">Sart</button>
<button (click)="stopCounting()">Stop</button>
`,
styleUrls: ["./app.component.css"]
})
export class AppComponent {
clickStream: Subject<Event>;
sub: Subscription;
ngOnInit() {}
clickMe(event: Event) {
console.log("Clicked");
if (this.clickStream) this.clickStream.next(event);
}
startCounting(event: Event) {
this.clickStream = new Subject<Event>();
this.sub = this.clickStream
.asObservable()
.pipe(reduce((acc, value) => acc + 1, 0))
.subscribe(val => console.log("You clicked " + val + " times"));
}
stopCounting() {
this.clickStream.complete();
}
ngOnDestroy() {}
}
