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

【问题标题】：Reflux Stores - Avoiding regression issues/naming conflictsReflux Stores - 避免回归问题/命名冲突
【发布时间】：2015-06-28 20:39:57
【问题描述】：

我们正在构建一个相当复杂的 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);
  },

  ...
});

【问题讨论】：

这里唯一真正好的解决方案涉及对回流的更改（动态生成动作名称）。不过，莫豪斯的解决方案是合理的。
这就是为什么人们建议最好只使用一个动作创建者的原因。然而，我们也有一个相当复杂的应用程序，我也更喜欢多个动作创建者。到目前为止，我们一直在通过手动将动作创建者的部分名称放入动作本身的名称中来使动作名称唯一。我确实更喜欢改变 Reflux 或同时类似@Morhaus 的解决方案。

标签： javascript reactjs reactjs-flux refluxjs

【解决方案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() { ... },

});

【讨论】：