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 ]

Solution 1

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))

Solution 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.

Comments

[user3743222]

Also, for this kind of debugging question, you should include the expected behaviour and ideally show some attempts at debugging.

[Thijs Koerselman]

OK I've added the expected output

[user3743222]

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.

[Thijs Koerselman]

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 has the same problem as I'm having in v5, so I guess I'll create an issue on github for that

[user3743222]

Well it is a beta version right. Don't forget to upvote the answers you found useful, and accept those who solved your problem.

[Thijs Koerselman]

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.