How to use the reflux.connect function in reflux

var React = require('react');
var Reflux = require('reflux');
var capitalize = require('capitalize');
var ConnectionStatusStore = require('../store');
//var ConnectionStatusActions = require('./actions');

var Component = React.createClass({
  mixins: [Reflux.connect(ConnectionStatusStore, 'status')],

  // TODO: Add reconneciton action.
  //onUpdateConnectionStatus: function () {
    //ConnectionStatusActions.refresh();
  //},

  render: function () {
    var className = this.props.className;
    className += this.state.status === 'connected' ? ' connected' : ' disconnected';

    return (
      <p>{capitalize(this.state.status)}</p>
    );
  }
});

var React = require('react');

// reflux
var Reflux = require('reflux');
var ruleStore = require('../stores/rules');
var codeStore = require('../stores/code');

// components
var ChallengeEditor = require('./ChallengeEditor.jsx');
var Challenge = require('./Challenge.jsx');

var UI = React.createClass({
  mixins: [
    Reflux.connect(ruleStore),
    Reflux.listenTo(codeStore, 'onCodeStoreChange')
  ],

  getInitialState() {
    return {
      title: '',
      description: '',
      expressionChains: [],
      required: [],
      present: [],
      valid: true
    };
  },

  // codeStore can also emit an editorText string after a
  // codeEditOverride, so we typecheck before setting state

'use strict';

var React           = require('react');
var Reflux          = require('reflux');

var MailWindowStore = require('js/stores/windows/mail');

var MailWindow = React.createClass({
    mixins : [
        Reflux.connect(MailWindowStore, 'mailWindow')
    ],
    render : function() {
        if (this.state.mailWindow.show) {
            YAHOO.lacuna.Messaging.show();
        }

        // TODO: make this into a React component!!

        return <div></div>;
    }
});

module.exports = MailWindow;

}.bind(this))
    },
    onAddOption: function(option, callback){
      request({url: this.url, method: 'POST', json: {name: option}}, function(error, response, body) {
        if(error || !body){
          return console.error('Failed to save')
        }
        this.options.unshift(body)
        callback(body)
        this.trigger(this.options)
      }.bind(this))
    }
})

module.exports = React.createClass({
  mixins: [Reflux.connect(optionsStore,'options')],
  getInitialState: function(){
    Actions.setUrl(this.props.url)
    Actions.setOptions(this.props.options)
    return {options: this.props.options,
      filteredOptions: this.props.options,
      currentOption: ''
    }
  },
  componentWillMount: function(){
    Actions.loadOptions(this.props.options)
  },
  filter: function(e){
    this.setState({
      currentOption: e.target.value,
      filteredOptions: (this.state.options.filter(function(option, index, list){
        return (e.target.value === option.name.substr(0, e.target.value.length))

}.bind(this))
    },
    onAddOption: function(option, callback){
      request({url: this.url, method: 'POST', json: {name: option}}, function(error, response, body) {
        if(error || !body){
          return console.error('Failed to save')
        }
        this.options.unshift(body)
        callback(body)
        this.trigger(this.options)
      }.bind(this))
    }
})

module.exports = React.createClass({displayName: "exports",
  mixins: [Reflux.connect(optionsStore,'options')],
  getInitialState: function(){
    Actions.setUrl(this.props.url)
    Actions.setOptions(this.props.options)
    return {options: this.props.options,
      filteredOptions: this.props.options,
      currentOption: ''
    }
  },
  componentWillMount: function(){
    Actions.loadOptions(this.props.options)
  },
  filter: function(e){
    this.setState({
      currentOption: e.target.value,
      filteredOptions: (this.state.options.filter(function(option, index, list){
        return (e.target.value === option.name.substr(0, e.target.value.length))

/*** @jsx React.DOM */

var React = require("react");
var Reflux = require("reflux");

var alertStore = require('./store');
var AlertMessage = require('./AlertMessage');

var Alerts = React.createClass({
  mixins: [Reflux.connect(alertStore, "alerts")],

  getInitialState: function() {
      return {
          alerts: []
      };
  },

  render: function() {
    return (
      <div>{this.state.alerts}</div>
    );
  }
});


module.exports = Alerts;

});
  },
  handleClickClearCompleted: function() {
    TodoActions.clearCompleted();
    return false;
  },
  handleClickToggleAll: function(e) {
    TodoActions.toggleAllItems(e.currentTarget.checked);
  }
}, {
  debugName: 'TodoAppView'
});

var Cocktail = require('backbone.cocktail');
var Reflux = require('reflux');
module.exports = Cocktail.mixin(AppView, Reflux.connect(todoListStore, 'state'));

var React = require("react");
var Reflux = require("reflux");
var pkg = require("./stores/packageStore.jsx");
var mui = require("material-ui");
var {AppCanvas, AppBar} = mui;


var App = React.createClass({
	mixins: [Reflux.connect(pkg)],

	render: function (){
		return (
			
				
			
		);
	}
	
});


module.exports = App;

var ServerRPCStore          = require('js/stores/rpc/server');

var EmpireRPCActions        = require('js/actions/rpc/empire');
var MapMenuActions          = require('js/actions/menu/map');
var WindowActions           = require('js/actions/window');
var MailWindowActions       = require('js/actions/windows/mail');
var StatsWindowActions      = require('js/actions/windows/stats');

var EssentiaWindow          = require('js/components/window/essentia');


var TopBar = React.createClass({
    mixins : [
        Reflux.connect(EmpireRPCStore, 'empire'),
        Reflux.connect(ServerRPCStore, 'server'),
        Reflux.connect(MapModeMenuStore, 'mapMode')
    ],

    mapButtonTip : function() {
        if (this.state.mapMode === MapModeMenuStore.PLANET_MAP_MODE) {
            return 'To Star Map';
        } else {
            return 'To Planet Map';
        }
    },

    render : function() {
        var barClass = classNames('ui inverted compact small menu', {
            red  : this.state.empire.self_destruct_active,
            blue : !this.state.empire.self_destruct_active
        });

propTypes : {
        //buildingId :  React.PropTypes.number.isRequired
    },

    getInitialState : function() {
        return {
            task :      'all',
            tag :       'all',
            type :      'all',
            name :      ''
        };
    },

    mixins : [
        Reflux.connect(ViewAllFleetsSpacePortRPCStore, 'viewAllFleetsStore')
    ],

    handleTaskChange : function(e) {
        this.setState( { task : e.target.value } );
    },

    handleTagChange : function(e) {
        this.setState( { tag : e.target.value } );
    },

    handleTypeChange : function(e) {
        this.setState( { type : e.target.value } );
    },

    handleNameChange : function(e) {
        this.setState( { name : e.target.value } );