0.0.1 • Published 9 years ago
governor-js v0.0.1
governorjs
State manager courtesy of React.addons.update
Example
var React = require('react')
var Governor = require('governor')
var messageStore = function(state, hub) {
function set(newText) {
state.set({ $set: newText })
}
set('some default text')
hub.on('updateText', set)
}
var Message = React.createClass({
render: function() {
return (
<div id="example">
<MessageInput hub={this.props.hub} text={this.state.text} />
{ this.state.text }
</div>
)
}
})
var MessageInput = React.createClass({
mixins: [ Governor.childMixin('text') ],
update: function(e) {
this.props.emit('updateText', e.target.value)
},
render: function() {
<input type="text" value={this.props.message} onChange={this.update} />
}
})
Governor.create({
// binds messageStore's get/set to 'message' property of state given to below callback
message: messageStore
}, function(state, hub) {
// state is the current state (initially an object with whatever changes the above stores make
// hub is simple pub/sub to trigger actions in stores
React.render(<Message {...state} emit={hub.emit} />, document.getElementById('message'))
})
##API
###create :: (Object) -> Object
var stateManager = Governor.create({
foo: fooStore,
bar: barStore
}, function(state, hub) {
// state.foo is fooStore's state
// state.bar is barStore's state
// do things with current state and communication hub
})
###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 A store is just a function.
This function will receive 2 arguments, the first, an object containing get
and set
methods, used to update the store's state, and the second, a reference to an event hub that it can listen to for relevant events.
set
uses React.addons.update, documented here.
0.0.1
9 years ago