State manager courtesy of React.addons.update
var React = require('react')
var governor = require('governor')
var hub = governor.hub
var messageStore = function(state) {
state.set('some default text')
hub.on('updateText', state.set)
}
var Message = React.createClass({
render: function(props) {
return (
<div id="example">
<MessageInput text={this.props.message} />
{ this.props.message }
</div>
)
}
})
var MessageInput = React.createClass({
mixins: [ Governor.pureRenderMixin('text') ],
render: function() {
return <input type="text" value={this.props.message} onChange={R.compose(hub.bind('updateText'), R.path([ 'target', 'value' ]))} />
}
})
governor({
// binds messageStore to 'message' property of state given to below callback
message: messageStore
}, function(state) {
// state is the current state (initially an object with whatever changes the above stores make)
React.render(<Message {...state} />, document.getElementById('message'))
})
##API
###governor :: (object) -> null
governor({
foo: function(state) { state.set({ a: 1 }) },
bar: function(state) { state.set('default bar') }
}, function(state) {
// state.foo is fooStore's state
// state.bar is barStore's state
// do things with current state, like render a React component
})
###pureRenderMixin :: (str str ...etc) -> react-mixin-object
var mixin = Governor.pureRenderMixin('foo', 'zap')
The above mixin, when mixed into a component, would cause it to only rerender if its incoming "foo" or "zap" property was changed from the last render (using ===
).
###Store interface :: (object) -> null A store is just a function.
This function will receive an object containing get
, update
, set
, and merge
methods, used to update the store's state.
update
uses React.addons.update, documented here. set
and merge
are shortcuts to those specific types of updates.