Pass action result to action listener in a component

[slawekkolodziej]

Assume the following structure:

actions/category.js:

import { BaseActions } from 'fluxapp';

class CategoriesActions extends BaseActions {
  select(id) {
    return id;
  }
}

fluxapp.registerActions('categories', CategoriesActions);

stores/categories.js:

import fluxapp, { BaseStore } from 'fluxapp';

class CategoriesStore extends BaseStore {
  static actions = {
    onSelectCategory : 'category.select',
  }

  onSelectCategory(id) {
    console.log(id, '<-- store');
  }
}

fluxapp.registerStore('categories', CategoriesStore);

movies.jsx:

import { Component as FluxappComponent } from 'fluxapp';

class Movies extends FluxappComponent {
  static actions = {
    onSelectCategory : 'category.select:after',
  };

  onSelectCategory(id) {
    console.log(id, '<-- component');
  }
}

categories.jsx:

import { Component as FluxappComponent } from 'fluxapp';

class Movies extends FluxappComponent {
  selectCategory() {
    this.getActions('categories').select(42);
  }

  render() {
    return (
      <button onClick={ this.selectCategory.bind(this) }>
          Select category
      </button>
    );
  }
}

Now if I click the button in categories.jsx I'll get the following output:

42 <-- store
undefined <-- component

If I update the component's actions to this:

static actions = {
  onSelectCategory : 'category.select',
};

I get the rendering error.

I noticed that it's impossible to bind directly to an event like category.select within the component because of this check: https://github.com/colonyamerican/fluxApp/blob/master/lib/componentMixin.js#L77-L81

If it's there by design, to force developer to bind to either event success or failure, then it'd be nice to have the action result in the ":after" event: https://github.com/colonyamerican/fluxApp/blob/master/lib/actions.js#L87-L88