FluxibleMixin #
FluxibleMixin will be deprecated since React mixin support will eventually be removed. It is highly recommended to use provideContext and connectToStores instead.
var FluxibleMixin = require('fluxible-addons-react/FluxibleMixin');
The mixin will add the contextTypes
getStore
and executeAction
to your component.
The mixin can also be used to statically list store dependencies and listen to
them automatically in componentDidMount
. This is done by adding a static
property storeListeners
in your component.
You can do this with an array, which will default all store listeners to call
the onChange
method:
var FooStore = require('./stores/FooStore'); // Your store
var Component = React.createClass({
mixins: [FluxibleMixin],
statics: {
storeListeners: [FooStore]
},
onChange: function () {
this.setState(this.getStore(FooStore).getState());
},
});
Or you can be more explicit with which function to call for each store by using a hash:
var FooStore = require('./stores/FooStore'); // Your store
var BarStore = require('./stores/BarStore'); // Your store
var Component = React.createClass({
mixins: [FluxibleMixin],
statics: {
storeListeners: {
onFooStoreChange: [FooStore],
onBarStoreChange: [BarStore]
}
},
onFooStoreChange: function () {
this.setState(this.getStore(FooStore).getState());
},
onBarStateChange: function () {
this.setState(this.getStore(BarStore).getState());
}
});
This prevents boilerplate for listening to stores in componentDidMount
and
unlistening in componentWillUnmount
.