A React mixin to bind component state to a NuclearJS reactor.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
.gitignore
README.md
package.json

README.md

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 = PlayerCard

What 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