In an rxjs stream, I'm using distinctUntilChanged
with lodash's isEqual
to filter out duplicate values. However it appears to not be working as expected. Take the following code snippet
import { isEqual } from 'lodash-es';
let cachedValue: any;
function testFn(observableVal: Observable<any>) {
return observableVal
.pipe(
distinctUntilChanged(isEqual),
tap(val => {
const equal = isEqual(cachedValue, val);
console.log('"output":', equal, cachedValue, val);
cachedValue = val;
})
)
}
In this example, I would expect that const equal
inside the tap
function would never === true
. I would expect that distinctUntilChanged(isEqual)
would filter out any values where isEqual(cachedValue, val) === true
--> meaning that const equal === false
always. However, console output shows:
"output": false undefined [ContactList]
"output": true [ContactList] [ContactList]
"output": true [ContactList] [ContactList]
"output": true [ContactList] [ContactList]
Do I misunderstand something fundamental about how the distinctUntilChanged()
operator works? I've posted a simplified example because the actual rxjs stream is very complex, but I wouldn't expect the complexity to make any difference in so far as const equal
should always === false
in the tap
operator.
I'm just trying to understand what's going on, so any info is appreciated. Thanks!
It should be noted that if I change the code to:
function testFn(observableVal: Observable<any>) {
return observableVal
.pipe(
filter(val => {
const equal = isEqual(cachedValue, val);
cachedValue = val;
return !equal;
}),
tap(val => {
console.log('"output":', val);
})
)
}
Then the filtering works as expected. I was under the impression that distinctUntilChanged(isEqual)
was equivalent to:
filter(val => {
const equal = isEqual(cachedValue, val);
cachedValue = val;
return !equal;
})
Am I mistaken / misunderstanding the distinctUntilChanged
operator?
I figured it out! Thanks to a comment in an rxjs issue: I had accidently subscribed to the observable multiple times (which shouldn't have happened). The multiple console.log
instances were coming from different subscription instances.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With