index.ios.js

'use strict';

var React = require('react-native');
var Fluxxor = require('fluxxor');

var {
  AppRegistry,
  TouchableHighlight,  
  StyleSheet,
  Text,
  View,
} = React;

var constants = {
  UPDATE_COUNTER: "UPDATE_COUNTER"
};

var CounterStore = Fluxxor.createStore({
  initialize: function() {
    this.counter = 0;
    this.bindActions(
      constants.UPDATE_COUNTER, this.onUpdateCounter
    );
  },
  onUpdateCounter: function(payload) {
    this.counter = this.counter + payload.value
    this.emit('change');
  },
  getState: function() {
    return { counter: this.counter };
  }
});

var actions = {
  plusCounter: function() {
    this.dispatch(constants.UPDATE_COUNTER, {value: 1 });
  },
  minusCounter: function() {
    this.dispatch(constants.UPDATE_COUNTER, {value: -1 });
  }
};

var FluxMixin = Fluxxor.FluxMixin(React),
    StoreWatchMixin = Fluxxor.StoreWatchMixin;

var AwesomeApp = React.createClass({
  mixins: [ FluxMixin, StoreWatchMixin('CounterStore') ],

  getStateFromFlux: function() {
    return this.getFlux().store('CounterStore').getState();
  },

  _onPressPlus: function() {
    this.getFlux().actions.plusCounter();
  },

  _onPressMinus: function() {
    this.getFlux().actions.minusCounter();
  },
  
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          {this.state.counter}
        </Text>
      
        <TouchableHighlight onPress={this._onPressPlus}>
          <Text>+</Text>    
        </TouchableHighlight>

        <TouchableHighlight onPress={this._onPressMinus}>
          <Text>-</Text>    
        </TouchableHighlight>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

var stores = { CounterStore: new CounterStore() };
var flux = new Fluxxor.Flux(stores, actions);

// Flux Wrapper
var AwesomeProject = React.createClass({
    render: function() {
    return (
      <AwesomeApp flux={flux} />
    );
  }
});

AppRegistry.registerComponent(
  'AwesomeProject', 
  () => AwesomeProject
);