SymbiosisMixin is a mixin for React components that have a strong relationship with their respective Flux stores (Alt).

README.md

Usage

React.createClass({
	mixins: [Symbiosis(Store)],
	render() {
		...
	}
});

Is the same as:

React.createClass({
	getInitialState() {
		return Store.getState();
	},
	componentWillMount() {
		Store.listen(this.onChange);
	},
	componentWillUnmount() {
		Store.unlisten(this.onChange);
	},
	onChange() {
		this.setState(Store.getState());
	}
	render() {
		...
	}
});

symbiosis-mixin.js

// ECMAScript 6
// React.createClass does not copy symbols, even when enumerable
const onChange = '__onChange';

export default function(Store) {
	return {
		getInitialState() {
			return Store.getState();
		},
		componentWillMount() {
			Store.listen(this[onChange]);
		},
		componentWillUnmount() {
			Store.unlisten(this[onChange]);
		},
		[onChange]() {
			this.setState(Store.getState());
		}
	};
};