CODEWITHSUNDEEP
javascriptrxjs
a_b
a_b

Reputation: 1918

.ofArrayChanges() alternative in RxJS 5.4.3

In RxJs 5.4.3 how is it possible to implement a pattern similar to what could be achieved with .ofArrayChanges()? (which is not a function in 5.4.3)

http://jsfiddle.net/ablochs/6jr6syhz/1/

var arr = [1,2,3];
var source = Rx.Observable.ofArrayChanges(arr);

var subscription = source.subscribe(
    function (x) { console.log('Next: ' + x); },
    function (e) { console.log('Error: ' + e); },
    function ( ) { console.log('Completed'); });

arr.push(4)

RxJs .from operators docs

Upvotes: 1

Views: 596

Answers (1)

Oles Savluk
Oles Savluk

Reputation: 4345

Because of Array.observe is obsolete I recommend you to model your entire state in RxJS. Here is the tutorial from documentation - Creating applications with RxJS

And implementation for your case: 

const onPush$ = new Rx.Subject();
const onChange$ = new Rx.Subject();

const initialValue = [1, 2, 3];
const series$ = Rx.Observable
  .merge(
    onPush$.map(value => 
      series => {
        series.push(value);
        return series;
      }
    ),
    onChange$.map(({ index, value }) => 
      series => {
        series[index] = value;
        return series;
      }
    )
  )
  .scan(
    (series, makeNew) => makeNew(series),
    initialValue
  );
  
  
series$.subscribe(v => console.log(v));

console.log('push 10');
onPush$.next(10);

console.log('change 0th to be 9');
onChange$.next({ index: 0, value: 9 });

console.log('push 1000');
onPush$.next(1000);
<script src="https://unpkg.com/rxjs/bundles/Rx.min.js"></script>

Another hacky but still possible solution is to use ES6 Proxy. Something similar to this - Getter/setter on javascript array?

Upvotes: 1

Related Questions