{"action":"created","issue":{"url":"https://api.github.com/repos/cujojs/most/issues/71","labels_url":"https://api.github.com/repos/cujojs/most/issues/71/labels{/name}","comments_url":"https://api.github.com/repos/cujojs/most/issues/71/comments","events_url":"https://api.github.com/repos/cujojs/most/issues/71/events","html_url":"https://github.com/cujojs/most/issues/71","id":55438628,"number":71,"title":"Using with React","user":{"login":"roman01la","id":1355501,"avatar_url":"https://avatars.githubusercontent.com/u/1355501?v=3","gravatar_id":"","url":"https://api.github.com/users/roman01la","html_url":"https://github.com/roman01la","followers_url":"https://api.github.com/users/roman01la/followers","following_url":"https://api.github.com/users/roman01la/following{/other_user}","gists_url":"https://api.github.com/users/roman01la/gists{/gist_id}","starred_url":"https://api.github.com/users/roman01la/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/roman01la/subscriptions","organizations_url":"https://api.github.com/users/roman01la/orgs","repos_url":"https://api.github.com/users/roman01la/repos","events_url":"https://api.github.com/users/roman01la/events{/privacy}","received_events_url":"https://api.github.com/users/roman01la/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-01-26T01:20:22Z","updated_at":"2015-01-26T13:27:33Z","closed_at":null,"body":"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](https://github.com/fdecampredon/react-rxjs-todomvc/blob/gh-pages/src/views/header.jsx#L16).\r\n\r\nMy implementation using Most:\r\n```\r\nfunction handlerToStream (stream, event) {\r\n  try {\r\n    stream.source.sink.event(performance.now(), event)\r\n  } catch (err) {\r\n    stream.source.sink.error(performance.now(), err);\r\n  }\r\n}\r\n\r\nlet Button = React.createClass({\r\n\r\n  _onClick: handlerToStream.bind(null, (() => {\r\n\r\n    let stream = most.create(() => {});\r\n    stream.forEach(event => console.log(event.target));\r\n\r\n    return stream;\r\n  })()),\r\n  render() {\r\n\r\n    return <button onClick={this._onClick}>click</button>\r\n  }\r\n});\r\n```\r\n\r\nIs there a cleaner way to make this work?"},"comment":{"url":"https://api.github.com/repos/cujojs/most/issues/comments/71460009","html_url":"https://github.com/cujojs/most/issues/71#issuecomment-71460009","issue_url":"https://api.github.com/repos/cujojs/most/issues/71","id":71460009,"user":{"login":"briancavalier","id":90518,"avatar_url":"https://avatars.githubusercontent.com/u/90518?v=3","gravatar_id":"","url":"https://api.github.com/users/briancavalier","html_url":"https://github.com/briancavalier","followers_url":"https://api.github.com/users/briancavalier/followers","following_url":"https://api.github.com/users/briancavalier/following{/other_user}","gists_url":"https://api.github.com/users/briancavalier/gists{/gist_id}","starred_url":"https://api.github.com/users/briancavalier/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/briancavalier/subscriptions","organizations_url":"https://api.github.com/users/briancavalier/orgs","repos_url":"https://api.github.com/users/briancavalier/repos","events_url":"https://api.github.com/users/briancavalier/events{/privacy}","received_events_url":"https://api.github.com/users/briancavalier/received_events","type":"User","site_admin":false},"created_at":"2015-01-26T13:27:33Z","updated_at":"2015-01-26T13:27:33Z","body":"Hey @roman01la, good question.  Here's a version of `Button` that seems like it should do what you intended.  It's untested, but seems close enough for discussion :)  Please let me know if this seems like it's on the right track!\r\n\r\n```js\r\nlet Button = React.createClass({\r\n\tcomponentWillMount() {\r\n\t\t// emitEvent starts out as a noop, but will be re-assigned below\r\n\t\t// when clickStream is activated\r\n\t\tlet emitEvent = () => undefined;\r\n\t\tthis._onClick = event => emitEvent(event);\r\n\t\t\r\n\t\t// Stash the stream somewhere.  This isn't necessary, but it's not\r\n\t\t// clear why we'd use a stream if we don't allow someone else\r\n\t\t// to observe it.\r\n\t\tthis.clickStream = most.create(add => emitEvent = add);\r\n\t\tthis.clickStream.drain(); // Create demand to activate most.create callback\r\n\t} \r\n\t\r\n\trender() {\r\n\t\treturn <button onClick={this._onClick}>click</button>\r\n\t}\r\n});\r\n```\r\n\r\nThis example, and the RxJS one are slightly strange cases.  Reactive streams typically facilitate communication between a producer and one or more consumers.  In this case, though, the producer and consumer are, in fact, the same component.  The RxJS example seems to use that producer-consumer-loopback for every view, and AFAICT, no component consumes a stream produced by another component.\r\n\r\nThe point of that TodoMVC impl seems to be to try to do as much as possible with RxJS, so I can understand why the author may have chosen to do it that way.  Still, it seems like using reactive streams in that way makes the impl more complicated.\r\n\r\nI recently did an [experiment with TodoMVC](https://github.com/briancavalier/todomvc-fab/tree/master/examples/fabulous), most.js reactive streams, and [virtual-dom](https://github.com/Matt-Esch/virtual-dom) (ie similar to React).  I'm sure it could be improved and simplified, but you might find it interesting, and I'd love to hear your feedback.\r\n\r\nThe RxJS example also does something else that seems odd to me: it creates 3 subscriptions to the same stream ([`subscribe` and `forEach` are synonyms in RxJS](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/subscribe.md)) to handle a single kind of event, keyDown events.  That creates implicit ordering dependencies between the 3 different subscriptions ... for example [here](https://github.com/fdecampredon/react-rxjs-todomvc/blob/gh-pages/src/views/header.jsx#L36) and [here](https://github.com/fdecampredon/react-rxjs-todomvc/blob/gh-pages/src/views/header.jsx#L28).  There is no explicit dependency established between those two, but rather it relies on the implicit fact that the two subscriptions will be processed in a specific order.\r\n\r\nI hope that helps, and please do feel free to discuss!"}}