CODEWITHSUNDEEP
vue.jsrxjsobservable
Nomura Nori
Nomura Nori

Reputation: 5187

How to make observable from multiple event in Rxjs?

How are you. I am newbie of Rxjs. I am not sure how to merge observable from different event. I integrated Rxjs with Vue.js

export default {
  name: 'useraside',
  data: function () {
    return {
      searchKey: '',
      isPublic: true
    }
  },
  components: {
    User
  },
  subscriptions () {
    return {
      // this is the example in RxJS's readme.
      raps: this.$watchAsObservable('searchKey')
        .pluck('newValue')
        // .filter(text => text.length > 1)
        .debounceTime(500)
        .distinctUntilChanged()
        .switchMap(terms => fetchRaps(terms, this.userdata._id, this.isPublic))
        .map(formatResult)
    }
  }
}

Now event comes from searchKey changes, now I would like to subscribe same observable when isPublic value change. So I would like to get raps whenever searchKey changes or isPublic changes. Thanks.

Upvotes: 0

Views: 962

Answers (1)

atomrc
atomrc

Reputation: 2583

You could use the merge operator and keep using the this.isPublic in your switchMap, as Maxime suggested in the comment.

But I'd rather go with a nice a pure dataflow where you listen for the two values and consume them in your handlers. Something like

Rx.Observable.combineLatest(
  this.$watchAsObservable('searchKey').pluck('newValue'),
  this.$watchAsObservable('isPublic').pluch('newValue'),
  ([searchKey, isPublic]) => ({ searchKey, isPublic })
)
.dedounceTime(500)
.distinctUntilChanged()
.switchMap(({ searchTerm, isPublic }) => fetchRaps(searchTerm, this.userdata._id, isPublic))

Or event better is you can change the initial data structure to something like :

data: function () {
    return {
      searchConfig: {
        searchKey: '',
        isPublic: true
      }
    }
  },

you can then remove the combineLatest and only watch the searchConfig property.

The benefit of this implementation is that your dataflow is pure and doesn't depend on any external context (no need for the this.isPublic). Every dependency is explicitly declared at the beginning of the dataflow.

If you want to go even further, you can also watch the userdata and explicitly pass it down the dataflow :)

Upvotes: 2

Related Questions