How to use RxJs distinctUntilChanged?

Question

I'm getting started with RxJs (using the v5 beta), but somehow I can't figure out how to work with distinctUntilChanged. The output from the code below if I run it in babel-node is

[ 'a', 1 ]
{ key: 'a', state: 1 }
Next:  { value: 42 }
Completed

That is not what I would expect. Why is only one entry passing distinctUntilChanged? I would expect the output to be

[ 'a', 1 ]
[ 'a', 0 ]
[ 'a', 1 ]
{ key: 'a', state: 1 }
{ key: 'a', state: 2 }
{ key: 'a', state: 0 }
{ key: 'a', state: 1 }
Next:  { value: 42 }
Next:  { value: 24 }
Completed

Here's the code

import {Observable} from 'rxjs'

Observable.of(['a', 1], ['a', 1], ['a', 0], ['a', 1])
  .distinctUntilChanged(x => x[1])
  .subscribe(x => console.log(x))

Observable.of({key: 'a', state: 1}, {key: 'a', state: 2}, {key: 'a', state: 0}, {key: 'a', state: 1})
  .distinctUntilChanged(x => x.state)
  .subscribe(x => console.log(x))

Observable.of({value: 42}, {value: 42}, {value: 24}, {value: 24})
  .distinctUntilChanged(x => x.value)
  .subscribe(
    function (x) {
      console.log('Next: ', x)
    },
    function (err) {
      console.log('Error: ' + err)
    },
    function () {
      console.log('Completed')
    }
  )

The links in the v5 docs for these functions appear to be dead

------ edit -----

Some additional debugging:

Observable.of(['a', 1], ['a', 1], ['a', 0], ['a', 1])
  .do(x => console.log('before', x))
  .distinctUntilChanged(x => x[1])
  .do(x => console.log('after', x))
  .subscribe(x => console.log(x))

output:

before [ 'a', 1 ]
after [ 'a', 1 ]
[ 'a', 1 ]
before [ 'a', 1 ]
before [ 'a', 0 ]
before [ 'a', 1 ]

Also, for this kind of debugging question, you should include the expected behaviour and ideally show some attempts at debugging. — user3743222, Mar 28 '16 at 22:35

score 36 · Accepted Answer · answered Mar 30 '16 at 18:28

I got an answer here. Basically the function signature changed from (key selector, comparator) to (comparator, key selector).

This is how the example is done in v5:

Observable.of(['a', 1], ['a', 1], ['a', 0], ['a', 1])
  .distinctUntilChanged(null, x => x[1])
  .subscribe(x => console.log(x))

score 2 · Answer 2 · answered Mar 28 '16 at 22:30

2

Here is a sample with your code is Rxjs V4. You will see that it works correctly.

Observable.of(['a', 1], ['a', 1], ['a', 0], ['a', 1])
  .distinctUntilChanged(x => x[1])
  .subscribe(x => console.log(x))
...

So it seems to be something with the new beta version. Here are the specs for distinctUntilChanged. The operator itself seems to be working as in version 4.

To test things out, I recommend you trace the output of each function by inserting a .do(function(x){console.log(x)}) in between operators. I can only think of the of operator maybe passing on only the last element of the array.

answered Mar 28 '16 at 22:30

user3743222

18,345
5
69
75

alright, can you try now with `Observable.from` instead of `Observable.of` (put all your arrays in an array though)? Can you also try the same with `of` but change `'a', 1` to `'b', 1`. It seems `of` operator takes either only the last or the first argument you pass. – user3743222 Mar 29 '16 at 17:10
I can confirm that v4 works. Looks like v5 is broken or at least their own documentation is incorrect. The code at "with key selector" [here](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/distinctuntilchanged.md) has the same problem as I'm having in v5, so I guess I'll create an issue on github for that – Thijs Koerselman Mar 29 '16 at 20:51
1

Well it is a beta version right. Don't forget to upvote the answers you found useful, and accept those who solved your problem. – user3743222 Mar 29 '16 at 21:55
So it turned out it was not a bug but an API change. I better stick to v4 until the docs are available, so I have a clue of what I'm doing. – Thijs Koerselman Mar 30 '16 at 18:33

How to use RxJs distinctUntilChanged?

2 Answers2

Linked