Last active
August 29, 2015 14:24
-
-
Save pstoica/c081d04d5fd1b103d6f0 to your computer and use it in GitHub Desktop.
react-rx-component + hot reloading
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Rx, { Observable } from 'rx'; | |
export default function funcReplaySubject() { | |
function subject(value) { | |
subject.onNext(value); | |
} | |
for (var key in Rx.ReplaySubject.prototype) { | |
subject[key] = Rx.ReplaySubject.prototype[key]; | |
} | |
Rx.ReplaySubject.call(subject); | |
return subject; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import Rx, { Observable } from 'rx'; | |
import { createRxComponent, funcSubject } from 'react-rx-component'; | |
import StreamProvider from './StreamProvider'; | |
module.exports = React.createClass({ | |
render() { | |
return <StreamProvider | |
streams={{ | |
intents: require('./intents'), | |
models: require('./models') | |
}} | |
props$={({ intents, models }) => { | |
let { increment$, decrement$ } = intents; | |
let { count$ } = models; | |
return (props$) => Observable.combineLatest(props$, count$, (props, count) => ({ | |
...props, | |
increment: increment$, | |
decrement: decrement$, | |
count | |
})); | |
}} | |
> | |
{({count, increment, decrement, ...rest}) => ( | |
<div {...rest}> | |
<button onClick={decrement}>-</button> | |
{count} | |
<button onClick={increment}>+</button> | |
</div> | |
)} | |
</StreamProvider>; | |
} | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import funcReplaySubject from './funcReplaySubject'; | |
export default { | |
increment$: funcReplaySubject(), | |
decrement$: funcReplaySubject() | |
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { increment$, decrement$ } from './intents'; | |
const count$ = Rx.Observable.just(0) // change me! | |
.merge(increment$.map(() => 1)) // change me! | |
.merge(decrement$.map(() => -1)) // change me! | |
.scan((count, x) => count + x) | |
.do((count) => console.log(count)); | |
export default { count$ }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { createRxComponent } from 'react-rx-component'; | |
import { increment$ } from './intents'; | |
export default class StreamProvider extends React.Component { | |
render() { | |
let { props$, streams, children, ...rest } = this.props; | |
return React.createElement( | |
createRxComponent(props$ ? props$(streams) : ($props) => $props, children), | |
rest | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment