1

我们正在构建一个相当复杂的 React + Reflux 应用程序，并有几个商店来监听来自其他组件的一些操作。例如：

var FooStore = Reflux.createStore({

  listenables: [FooActions, BarActions],

  ...
});

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

  • 扩展 BarActions 时，您可能会在不知不觉中引入与 Foo 动作同名的动作，这将导致回归错误
  • 读取 FooStore 中的代码时，哪些函数与 BarAction 相关并不一定很明显
  • 如果您知道命名冲突，那么您需要创建过于冗长的操作

我怎样才能避免这些问题？

编辑

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

var FooStore = Reflux.createStore({

  listenables: [FooActions],

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

  ...
});
4

1 回答 1

2

由于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() { ... },

});
于 2015-04-21T16:00:45.367 回答