[RxJS] Using Observable.create for fine-grained control

Sometimes, the helper methods that RxJS ships with such as

fromEvent

,

fromPromise

etc don't always provide the exact values you want & you end up having to do extra work to force them into the shape you require. For more fine-grained control you can use

Observable.create

which allows you to project only the values which matter to you.

For example, the following code need add a filter method to filter the null value from the event.

const fromEvent    = Rx.Observable.fromEvent;

function delegate (wrapperSelector, elementSelector, eventName) {

return fromEvent(
document.querySelector(wrapperSelector),
eventName,
(ev) => {
return ev.target.closest(elementSelector);
}
).filter(x => x !== null)
}

delegate('.wrapper', 'button', 'click')
.subscribe(x => {
document.querySelector('#output').textContent = `Button ${x.textContent} clicked`;
});

We can use create method to do:

const create    = Rx.Observable.create;

function delegate (wrapperSelector, elementSelector, eventName){
return create( (observe)=> {
const wrapper = document.querySelector(wrapperSelector);
const handler = (ev) => {
const match = ev.target.closest(elementSelector);
if(match) {
return observe.onNext(match);
}
}

wrapper.addEventListener(eventName, handler, false);

// cancel the listener
return ()=>{
wrapper.removeEventListener(eventName, handler);
}
});
}

So to recap, sometimes the values that are projected from the helpers that RXJS ships with, are not exactly what you want, and you end up having to do a little bit of extra work to force them into the shape that want. If you find yourself doing this, you can always use create instead.

Create is the factory function that creates an anonymous observable for you, gives you the opportunity to only project the values that you want. You end up having to do a bit more manual work, such as adding event listeners and removing them finished with, but the result will be greater performance and greater control.