Flux Property

The flux property on the component enables the mixin to properly initiate and destruct the component. It consists of two properties in itself, actions and stores.

The flux property is optional and can be omitted if no binding is required.

Actions

In the actions property we can bind to before, after and failed events, that our component may want to react on.

JavaScript

React.createClass({
  mixins: [fluxapp.mixins.component],
  
  flux: {
    actions: {
      onFailed: ['user.login:failed', 'session.renew:failed'],
      onBefore: 'user.login:before',
      onAfter: 'user.login:after',
    }
  },
  
  onFailed: function(reason) {
    // action failed, show visual notification
  },
  
  onBefore: function() {
    // show a loading spinner
  },
  
  onAfter: function() {
    // remove the spinner display user name
  },
});

Stores

In the stores property we can bind a method to the change event of one or more stores, even directly to setState or replaceState

JavaScript

React.createClass({
  mixins: [fluxapp.mixins.component],
  
  flux: {
    stores: {
      replaceState: ['user'],
      setState: 'session',
      onPermissionsChange: 'permissions'
    }
  },
  
  onPermissionsChange: function(permissions, storeName) {
    this.setState({
      permissions: permissions
    });
  }
});

👍

On to the Component Mixin