Fluxxor-AutoBind
An auto-binding plugin for Fluxxor to prevent spaghetti props wiring.
Usage
Usage requires three simple steps:
- Install
AutoBind
after initializing Flux.
var flux = stores actions;;
- Specify properties you want to expose in your stores.
var ExampleStore = Fluxxor
- Reference these properties in your views.
var DeeplyNestedView = React
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.