Stores example

by marquex

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="http://arqex.github.io/fluxify/javascripts/fluxify.min.js"></script>

JavaScript 1.7

// fluxify is global after add it with a script tag
var flux = fluxify;

var nameStore = flux.createStore({
	id: 'nameStore',
	initialState: {
		name: 'Alice'
	},
	actionCallbacks: {
		changeName: function( updater, name ){
            // We can update nameStore with the set method
            // of the first argument
			updater.set( {name: name} );
		}
	}
});

// Let's create a react component
var Hello = React.createClass({
	getInitialState: function(){
		return {name: this.props.name };
	},
    
    render: function() {
        return <div>Hello {this.state.name}</div>;
    },

	componentDidMount: function(){
        var me = this;
		nameStore.on( 'change:name', function( value ){
			me.setState( {name: value} );
		});
        
        //Let's update the name in 2 seconds
        setTimeout( function(){
            flux.doAction( 'changeName', 'Bob' );
        }, 2000);
	}
}); 
React.render(<Hello name={nameStore.name} />, document.body);