Question

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

var FooStore = Reflux.createStore({

  listenables: [FooActions, BarActions],

  ...
});

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

扩展BarActions时，您可能会在不知不觉中引入一个动作与Foo操作同名，这将导致回归错误
在阅读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() { ... },

});

回流商店 - 避免回归问题/命名冲突

1 个答案: