Nuclear React Mixin
A React mixin to bind component state to a NuclearJS reactor.
Usage
/* @jsx React.DOM */
var React = require('react')
// instance of a Nuclear Reactor
var reactor = require('./reactor')
var ReactorMixin = require('nuclear-react-mixin')
var PlayerCard = React.createClass({
mixins: [ReactorMixin(reactor)],
getDataBindings: function() {
return {
playerInfo: ['players', this.props.id],
// can lookup by array or string
avatarSize: 'displayOptions.avatarSize'
// can pass it a getter
playerCount: Nuclear.Getter('game.players', function(players) {
return players.size
})
}
},
render: function() {
var avatarSize = this.state.avatarSize
return (
<div>
<img
src={this.state.playerInfo.avatarUrl}
width={avatarSize}
height={avatarSize}
/>
<h3>{this.state.playerInfo.name}</h3>
</div>
)
}
})
module.exports = PlayerCardWhat is it doing?
It is keeping the React component in sync with the Nuclear Reactor. It does this by implementing
getInitialState().
// The mixin is actually doing:
getInitialState: function() {
return {
playerInfo: reactor.get(['players', this.props.id]),
avatarSize: reactor.get('displayOptions.avatarSize'),
}
}Also whenever any of the bound data values change on the Nuclear Reactor it will call
this.setState(state) with the updated state values. It does this in a very efficient manner
since it only has to do prevState.getIn(keyPath) === nextState.getIn(keyPath) to check if the
value has changed (Immutability FTW)
The mixin also provides all the logic to destroy unregister all the reactor.observe watchers automatically on
componentWillUnmount