Fluxxor-AutoBind

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

Usage

Usage requires three simple steps:

1. Install AutoBind after initializing Flux.

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

2. 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'],
})

3. Reference these properties in your views.

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 <div>{this.state.foo + " " + this.state.bar}</div>;
  }
})

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 them into a registry hosted on the Flux instance and simply reference them by name.

The result is a very simple setup that only requires a few small changes every time you add a property and want to reference it in your components.

Example

https://strml.github.io/fluxxor-autobind/ (View Source)