CODEWITHSUNDEEP
javascriptrxjs
pablo
pablo

Reputation: 747

RxJs best practices for subscribing to multiple events from an object

I'm new to RxJs, I have an object that should be observable: other code needs to be able to listen to several custom events that this object can emit. So for instance if I have this:

class MyObject {

  constructor() {
    this.arr = [];
  }

  addOne(value) {
    this.arr.push(value);
    // fire event ITEM_ADDED
  }

  removeLast() {
    this.arr.splice(-1, 1);
    // fire event ITEM_REMOVED
  }
}

I want other code to do something like this:

const myObj = new MyObject();
myObj.on('ITEM_ADDED', () => console.log('item added!'));
myObj.on('ITEM_REMOVED', () => console.log('item removed!'));

I don't know if it makes sense to use RxJs for this use case or just implement an observable object myself (as I was doing before using RxJs). I was trying to make MyObject extend Observable but I didn't find a way to fire the event.

Upvotes: 2

Views: 632

Answers (1)

glendaviesnz
glendaviesnz

Reputation: 1899

One approach would be to use a Subject, eg.

class MyObject {
    eventStream = new Rx.Subject();
    constructor() {
        this.arr = [];
    }

    addOne(value) {
        this.arr.push(value);
        this.eventStream.next('ITEM_ADDED')
    }

    removeLast() {
        this.arr.splice(-1, 1);
        this.eventStream.next('ITEM_REMOVED')
    }
}

myObject.eventStream
.filter(event => event === 'ITEM_ADDED')
.subscribe(() => console.log('Item added'))

myObject.eventStream
.filter(event => event === 'ITEM_REMOVED')
.subscribe(() => console.log('Item removed'))

Upvotes: 2

Related Questions