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

Question

我还没有找到 example/demo 或文档，以正确处理来自纸切换按钮的 "on-change" 或 "on-click" 用户操作，适用于 Redux。

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

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

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

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

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

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

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

Answer 1

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

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

How to build a Redux reducer for a paper-toggle-button in Polymer 2?

ecmascript-6

material-design

redux

polymer-2.x