javascript - Reflux Stores - 避免回归问题/命名冲突

Question

我们正在构建一个相当复杂的 React + Reflux 应用程序，并且有几个 store 可以监听来自其他组件的一些 Action 。例如:

var FooStore = Reflux.createStore({

  listenables: [FooActions, BarActions],

  ...
});

出于以下几个原因，我认为这种方法并不理想:

• 在扩展 BarActions 时，您可以在不知不觉中引入一个 Action 与 Foo Action 同名，这将导致回归错误
• 在阅读 FooStore 中的代码时，哪些函数与 BarActions 相关并不一定很明显
• 如果您意识到命名冲突，则需要过度创建详细操作

如何避免这些问题？

编辑

我目前避免这些问题的方法是明确说明商店在其主要事件源之外正在监听哪些操作:

var FooStore = Reflux.createStore({

  listenables: [FooActions],

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

  ...
});

Answer 1

由于 FooActions 和 BarActions 是简单的键值存储，其中键是操作的名称，值是操作本身，您可以将它们合并成一个新对象并自动为它们的键添加前缀以避免与一个相当简单的函数发生冲突:

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;
}

您的 FooStore 将如下所示:

var FooStore = Reflux.createStore({

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

  onFooShoot: function() { ... },

  onBarShoot: function() { ... },

});