An auto-binding plugin for Fluxxor to prevent spaghetti props wiring.
npm install fluxxor-autobind
Usage requires three simple steps:
- Install
AutoBindinto your Flux instance after initializing it.
var flux = new Fluxxor.Flux(stores, actions);
require('fluxxor-autobind').install(flux);- 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'],
// ...
})- 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 <div>{this.state.foo + " " + this.state.bar}</div>;
}
})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.