Using with React

I’m looking for a way of using Most with React, in particular to handle DOM events via React assignment style. Similar solution is presented with RxJS.

My implementation using Most:

function handlerToStream (stream, event) {
  try {
    stream.source.sink.event(performance.now(), event)
  } catch (err) {
    stream.source.sink.error(performance.now(), err);
  }
}

let Button = React.createClass({

  _onClick: handlerToStream.bind(null, (() => {

    let stream = most.create(() => {});
    stream.forEach(event => console.log(event.target));

    return stream;
  })()),
  render() {

    return <button onClick={this._onClick}>click</button>
  }
});

Is there a cleaner way to make this work?

[TrySound]

There’s recompose library with configurable utilities compatible with most/rxjs/xstream/flyd/kefir/bacon https://github.com/acdlite/recompose/blob/master/docs/API.md

const RegularComponent = componentFromStream(propsStream =>
  propsStream.map(props =>
    <div>{props.value}</div>
  )
)

const enhance = mapPropsStream(propsStream =>
  propsStream.map(props =>
    Object.assign({}, props, { value: 1 })
  )
)
const RegularComponent = enhance(props =>
  <div>{props.value}</div>
);

const { stream, handler } = createEventHandler();
stream
  .scan((s, a) => s + a, 0)

const dom = <div onClick={() => handler(1)}></div>;

[briancavalier]

Hey @nissoh, thanks very much for the kind words! I agree: reactive programming is a great way to model highly interactive front-ends. Switching from maintaining shared mutable state, to reactive values where state updates flow through the system is definitely a different way of thinking, but has lots of advantages.

I love the simple programming model you get when using most.js + reactive-dom. There’s practically no shared state to worry about.

i would love to see this fully functional. (:

I’ve been meaning to update that TodoMVC and submit it, but I haven’t had time lately. When you say “fully functional”, do you mean the inline todo editing (I didn’t implement that yet)? Or did you mean something more?