[Stackoverflow Question] How to create a new instance of Reflux Store and Action

[underscore05]

I am working with a reusable component that has coordinated dropdowns. One dropdown is the list categories while the other is a list of sub-categories depending on what category you've select on the first dropdown. Right now I have a SubcategoryStore that listens to a SubcategoryActions.

The problem is I wan't to reuse that SubcategoryStore but I want the DashboardSectionOne and DashboardSectionTwo independent to each other.

See code example:

import Reflux from 'reflux';
import networkService from './networkService';

const actions = [
  'getSubcategories',
  'getSubcategoriesSuccess',
  'getSubcategoriesFailure',
];
const SubcategoryActions = Reflux.createActions(actions);
SubcategoryActions.getSubcategories.listen((categoryId) => {
  networkService.getSubcategories(categoryId)
  .done(SubcategoryActions.getSubcategoriesSuccess)
  .fail(SubcategoryActions.getSubcategoriesFailure);
});

===============================

import Reflux from 'reflux';
import subcategoryActions from './subcategoryActions';

const SubcategoryStore = Reflux.createStore({
  listenables: [subcategoryActions], // eslint-disable-line
  onGetSubcategoriesSuccess(res) {
      this.trigger("getSubcategoriesSuccess", res);
  }
});

===============================
import subcategoryActions from './subcategoryActions';
import subcategoryStore from './subcategoryStore';

export default class DashboardSectionOne extends React.Component {
  ...
  componentDidMount() {
    this.unsubscribe = subcategoryStore.listen(this.onStoreUpdate.bind(this));
  }
  onStoreUpdate() {
    ... pre-fill subcategory dropdown
  }
  onCategorySelect(e) {
    subcategoryActions.getSubcategories(e.target.value);
  }
}
==============================
import subcategoryActions from './subcategoryActions';
import subcategoryStore from './subcategoryStore';

export default class DashboardSectionTwo extends React.Component {
  ...
  componentDidMount() {
    this.unsubscribe = subcategoryStore.listen(this.onStoreUpdate.bind(this));
  }
  onStoreUpdate() {
    ... pre-fill subcategory dropdown
  }
  onCategorySelect(e) {
    subcategoryActions.getSubcategories(e.target.value);
  }
}

[eek]

This is not a Reflux bug or feature request, so a issue for this should not exist.

Moving on, the best thing to do is when you trigger, trigger with an object that also contains the Dashboard Section you want to change, either DashboardSectionOne or DashboardSectionTwo. this should also reflect into your Subcategories selector from the current component:

  onCategorySelect(e) {
    subcategoryActions.getSubcategories({section: one, value: e.target.value});
  }

and then you can filter the state that comes from the store to only the one from the current Dashboard component

Hope this helps.

[underscore05]

Thanks @eek. Didn't mean to post it as an issue but I can't find any IRC and my question from Stackoverflow not yet answered. So that means I need to propagate up until the action from where the request came from. Closing my question now.