CODEWITHSUNDEEP
javascriptreactjsreactjs-fluxrefluxjs
Markus Coetzee
Markus Coetzee

Reputation: 3444

Reflux Stores - Avoiding regression issues/naming conflicts

We're building a rather complex React + Reflux application and have a couple of stores that listen to some actions originating from some other component. Eg:

var FooStore = Reflux.createStore({

  listenables: [FooActions, BarActions],

  ...
});

I don't find this approach ideal for a couple of reasons:

How can I avoid these issues?

EDIT

My current approach to avoid these issues is to specifically state which actions the store is listening to over and above its main source of events:

var FooStore = Reflux.createStore({

  listenables: [FooActions],

  init: function() {
    this.listenTo(BarActions.shoot, this.onShoot);
  },

  ...
});

Upvotes: 1

Views: 143

Answers (1)

Alexandre Kirszenberg
Alexandre Kirszenberg

Reputation: 36418

Since FooActions and BarActions are simple key-value stores, where the key is the name of an action and value is the action itself, you could merge them into a new object and automatically prefix their keys to avoid conflicts with a rather simple function:

function mix(actionMaps) {
  var prefixedActionMap = {};
  Object.keys(actionMaps).forEach(function(mapKey) {
    var actionMap = actionMaps[mapKey];
    Object.keys(actionMap).forEach(function(actionKey) {
      // shoot -> fooShoot
      var prefixedActionKey = mapKey + actionKey.charAt(0).toUpperCase() + actionKey.slice(1);
      prefixedActionMap[prefixedActionKey] = actionMap[actionKey];
    });
  });
  return prefixedActionMap;
}

Your FooStore would then look like:

var FooStore = Reflux.createStore({

  listenables: [mix({ foo: FooActions, bar: BarActions })],

  onFooShoot: function() { ... },

  onBarShoot: function() { ... },

});

Upvotes: 2

Related Questions