Question: How to create a new instance of Reflux Store and Action

Question

How to create a new instance of Reflux Store and Action

Answers 0
Added at 2016-10-24 18:10
Tags
Question

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);
      }
    }
Answers to

How to create a new instance of Reflux Store and Action

Source Show
◀ Wstecz