Ecmascript 6 如何为Polymer 2中的纸张切换按钮构建Redux减速机？

我还没有找到一个示例/演示或文档，说明如何通过纸张切换按钮正确处理“更改”或“点击”用户操作

现在，我有一个被调用的带注释的事件侦听器函数，但在该函数中，我似乎无法获得对源元素的引用。我需要新的开/关值和id属性值，以便更新Redux存储中的正确状态。我在视图中有几个纸张切换按钮元素，每个元素对应于Redux存储中的不同属性

我为“”添加了一个事件侦听器，但抛出的事件不包括对html元素的引用。为什么这个事件不说它来自哪里

“event.target”指向保存引发事件的子元素的外部容器。为了了解这一点，我在console.log（event.target.nodeName）上设置了一个断点

我想我可以查询选择所有切换元素，并将所有值保存到Redux存储，但我宁愿只更新更改的一个

建议我应该能够使用“this”作为外部自定义元素的引用，该元素包含我的paper-toggle-button元素，这似乎没有用，因为我需要id来查询引发事件的元素

需要注意的是，我正在使用dom repeat构建纸张切换按钮元素。我正在遍历一个小对象数组来构建一些切换。这意味着所有切换都将为on change事件调用相同的事件处理程序函数。我必须这样做，因为可以通过拖放手动重新排序切换，不幸的是，这需要dom重复。如果拖放不是必需的，我可以放弃dom repeat，只构建一个静态/固定的切换列表，其中每个切换都有自己的事件处理程序

---

正如您可能已经猜到的，我是前端开发新手

你看过罗布·多德森的《61号和62号多桅船》吗？他们使用Polymer 1，但我已经在和的GitHub上发布了Polymer 2版本

我对Polymer和Redux还不熟悉，但到目前为止都很成功。我认为这会奏效：

在

redux store.html

中：

const initialState = {
  toggled: false,
  ...
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'TOGGLED':
      return Object.assign({}, state, {
        toggled: action.toggled;
      });
  ...

<paper-toggle-button 
  id="foo" on-tap="_doTap">Toggle</paper-toggle-button>

...

static get properties() {
  return {
    toggled: {
      type: Boolean,
      statePath: 'toggled'
    },
  ...
}

static get actions() {
  return {
    toggled() {
      return {
        type: 'TOGGLED'
      };
    }
  }
}

_doTap(e) {
  this.dispatch('toggle', this.$.foo.checked);
//  this.$.foo.checked = this.toggled;  // <- not needed
}

在

my element.html

中：

const initialState = {
  toggled: false,
  ...
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'TOGGLED':
      return Object.assign({}, state, {
        toggled: action.toggled;
      });
  ...

<paper-toggle-button 
  id="foo" on-tap="_doTap">Toggle</paper-toggle-button>

...

static get properties() {
  return {
    toggled: {
      type: Boolean,
      statePath: 'toggled'
    },
  ...
}

static get actions() {
  return {
    toggled() {
      return {
        type: 'TOGGLED'
      };
    }
  }
}

_doTap(e) {
  this.dispatch('toggle', this.$.foo.checked);
//  this.$.foo.checked = this.toggled;  // <- not needed
}

切换
...
静态获取属性（）{
返回{
切换：{
类型：布尔型，
状态路径：“切换”
},
...
}
静态获取操作（）{
返回{
切换（）{
返回{
类型：“切换”
};
}
}
}
_doTap（e）{
this.dispatch（'toggle'，this.$.foo.checked）；
//this.$.foo.checked=this.toggled；//谢谢你，Thad。是的，我看过polycast视频。目前，我已经破解了一个变通解决方案。我正在为我的每个切换发送一个操作，因为我无法分辨哪个元素正在调用带注释的函数。在你的代码中，带注释的函数是“\u doTap”。这个黑客解决方案效率低下，但很有效。我今天早上醒来时在想，“你为什么需要
这个。$.foo.checked=this.toggled；
？”你不需要。但是
这个.dispatch（'toggle'，this.$.foo.checked）
与其他元素共享
foo
的值。萨德，我不理解你最近评论中的最后一句话。你上面的示例代码很好，但你只有一个toggle元素。我有4个。_doTap函数和你的foo元素id是一对一的映射。当调用_doTap函数时，你总是知道t foo负责。如果您有多个切换，使用dom repeat动态构建，那么您的所有切换都将调用同一个_doTap函数，不是吗？在这种情况下，您将在第一个参数/参数中分配什么字符串值？您如何知道调用_doTap的切换的id？啊，我明白您的观点。我认为您可以用
e['target']
点击开关，但我不知道（在你的情况下）没有一些代码它们之间有什么不同。解决：我看的是错误的“event.target”。这很尴尬。所以如果我们看一下Thad的代码，有效的是…(u doTap（e）{this.dispatch（'toggle'，e.target）；}“抱歉所有这些混淆。