How to handle event side effects?

Question

I'm trying to implement a dropzone such as this React Component. However, I'm a bit stuck on how to apply write effects on events, e.g.

dragOver$: DOM
  .select('#dropzone')
  .events('ondragover')
  .map(e => {
    e.preventDefault()
    e.dataTransfer.dropEffect = 'copy'
  })

Which won't work since there is no sink. The code inside map should really be performed inside a sink.

Any suggestions?

Answer 1

You should write a simple driver that will handle this. See the docs on drivers here.

It seems like you could do something like this:

function main(sources) {
  return {
    dragOver: DOM.select('#dropzone').events('ondragover')
  };
}

const drivers = {
  DOM: makeDOMDriver('#app'),
  dragOver: (e$ => e$.subscribe(e => {
    e.preventDefault()
    e.dataTransfer.dropEffect = 'copy'
  }))
}

In short: drivers encapsulate all side effects and return inputs from those interfaces, and all side effects in Rx code is constrained to the subscribe argument Observers.