Fluxxor Autobind

Fluxxor-AutoBind

An auto-binding plugin for Fluxxor to prevent spaghetti props wiring.

Installation

`npm install fluxxor-autobind`

Usage

Usage requires three simple steps:

1. Install AutoBind into your Flux instance after initializing it.

var flux = new Fluxxor.Flux(stores, actions);
require('fluxxor-autobind').install(flux);

1. Specify properties you want to expose in your stores.

var ExampleStore = Fluxxor.createStore({
  // This is the only piece of configuration you need to add. 
  // Names must be unique, and must be equal to the property 
  // name on the store.
  autoBind: ['foo', 'bar'],
  // ...
})

1. Reference these properties in your views.

var AutoBind = require('fluxxor-autobind');
var DeeplyNestedView = React.createClass({
  mixins: [
    // Flux must be available to the view.
    FluxChildMixin, 
    // Specify the properties you want to be bound to this 
    // component's state.
    AutoBind.Mixin('foo', 'bar') 
  ],
  render: function() {
    return 
{this.state.foo + " " + this.state.bar}
;
  }
})

Rationale

When developing a Flux application, over time you can end up with a ton of properties going from your root component down to deeply nested components. It can make adding simple properties to your stores and getting them to your components very complicated, as each intermediate component has to pass the prop down. And, unless your app is using immutable values, `shouldComponentUpdate` can start to get massively complicated.

Fluxxor's solution for this is to use `StoreWatchMixin` and `getStateFromFlux` to accomplish this.

I have found in practice that this is error-prone (ever forget to specify the store's name in StoreWatchMixin?) and could be simplified via a simple property registry. Since property names are (usually) unique per store, it makes sense to enter the