Side effects that resources create in rx (reactive extensions)

Question

The rx recommendations say to avoid side effects when possible, and put them in do () (doAction in js) if they are unavoidable.

However, a very common side effect in the user interface is to create some resource (for example, a <div>), which is referred to by the downstream (by child widgets). You must grab pens for these resources so that they can be transferred. For example. if you have an array of data, each of which requires a div, you must create a div for each and pass descriptors for these divs.

However, doAction () discards the return value of the side effect, so you cannot capture the descriptors of the objects being created. You have to do a side effect in select ().

Am I looking at it all wrong? Resources created are states and are secondary. You need state in the stream, but you cannot put it in the stream without sending side effects to select (), which is contraindicated.

Answer 1

Keep in mind that these are just recommendations. If you want a side effect in you to choose a function, and you understand how it will be used, go after it.

But also ... do you consider creating individual elements and attaching them only to the document in your callback? In other words, this is not a resource creation, this is a side effect. Only when you do something with a resource. I used this template several times ...

$(someElement).onAsObservable("click")
    .select(function(ev) {
            return $("<div>");
     })
     ...do stuff to detached div
     .subscribe(function($el) {
          // finally attach it
          $(container).append($el);
     });

Answer 2

FRP. , . select / map selectMany / flatMap, .

. ( Bacon.js, RxJs)

var allClicks = event.flatMap(function(value) {
  var widget = $("<input>") // etc
  $("form").append(widget)
  return widget.asEventStream("click")
})

, . "allClicks" .