https://github.com/strml/fluxxor-autobind
AutoBind plugin for Fluxxor to help prevent spaghetti props wiring.
https://github.com/strml/fluxxor-autobind
Last synced: 6 months ago
JSON representation
AutoBind plugin for Fluxxor to help prevent spaghetti props wiring.
- Host: GitHub
- URL: https://github.com/strml/fluxxor-autobind
- Owner: STRML
- Created: 2014-10-04T13:20:12.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2014-10-05T08:08:49.000Z (over 11 years ago)
- Last Synced: 2025-09-21T12:02:04.593Z (6 months ago)
- Language: JavaScript
- Homepage: http://strml.github.io/fluxxor-autobind
- Size: 1.18 MB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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.
```javascript
var flux = new Fluxxor.Flux(stores, actions);
require('fluxxor-autobind').install(flux);
```
2. Specify properties you want to expose in your stores.
```javascript
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.
```javascript
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 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](https://github.com/STRML/fluxxor-autobind/blob/gh-pages/index.js))