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

Question

对于 Redux，我还没有找到关于从纸张切换按钮处理“on-change”或“on-click”用户操作的正确方法的示例/演示或文档。

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

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

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

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

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

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

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

Answer 1

你看过 Rob Dodson 的 Polycasts #61 和 #62 吗？他们使用 Polymer 1，但我在 GitHub 上的 https://github.com/johnthad/polycast61 和 https://github.com/johnthad/polycast62 上发布了 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;
      });
  ...

在my-element.html:

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