Как создать редуктор Redux для бумажного переключателя в Polymer 2?

Я не нашел пример/демонстрацию или документацию о правильном способе обработки действий пользователя «при изменении» или «при щелчке» с помощью бумажного переключателя для Redux.

Прямо сейчас у меня есть аннотированная функция прослушивания событий, которая вызывается, но в этой функции я не могу получить ссылку на исходный элемент. Мне нужно новое значение включения/выключения и значение атрибута id, чтобы я мог обновить правильное состояние в магазине Redux. У меня есть несколько элементов paper-toggle-button в представлении, каждый для другого свойства в магазине Redux.

Я добавил прослушиватель событий для "checked-changed", но выброшенное событие не содержало обратной ссылки на элемент html. Почему в событии не сказано, откуда оно взялось?

«event.target» указывает на внешний контейнер, содержащий дочерние элементы, вызывающие событие. Чтобы узнать это, я установил точку останова в console.log(event.target.nodeName).

Я полагаю, что мог бы запросить выбор всех элементов переключения и сохранить все значения в хранилище Redux, но я бы предпочел обновить только тот, который изменился.

документация предполагает, что я должен иметь возможность использовать "это" как ссылка на внешний пользовательский элемент, содержащий мои элементы paper-toggle-button, что кажется бесполезным, потому что мне нужен идентификатор для запроса элемента, вызвавшего событие.

Важно отметить, что я создаю свои бумажные кнопки-переключатели с помощью dom-repeat. Я перебираю небольшой массив объектов, чтобы создать несколько переключателей. Это означает, что все переключатели будут вызывать одну и ту же функцию обработчика событий для события изменения. Я должен сделать это, потому что переключатели можно переупорядочить вручную с помощью перетаскивания, что, к сожалению, требует dom-repeat. Если бы перетаскивание не было обязательным, я мог бы отказаться от dom-repeat и просто создать статический/фиксированный список переключателей, где у каждого переключателя был бы свой собственный обработчик событий.

Как вы могли догадаться, я новичок в разработке интерфейса.


material-design redux ecmascript-6 polymer-2.x
person bwfrieds    schedule 12.02.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы смотрели поликасты Роба Додсона №61 и №62? Они используют Polymer 1, но я разместил версии Polymer 2 на GitHub по адресу https://github.com/johnthad/polycast61 и https://github.com/johnthad/polycast62

Я новичок в Polymer и Redux, но до сих пор добился успеха. Я думаю, это сработает:

In redux-store.html:

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

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

In 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
}
person Thad    schedule 14.02.2018
comment
Спасибо, Тад. Да, я видел поликасты. На данный момент я взломал обходное решение. Я отправляю действие для каждого из моих переключателей, потому что не могу сказать, какой элемент вызывает аннотированную функцию. В вашем коде ваша аннотированная функция — _doTap. Хакерское решение неэффективно, но работает. - person bwfrieds; 15.02.2018
comment
Я проснулся этим утром и подумал: зачем тебе this.$.foo.checked = this.toggled;? Вы не знаете. Но this.dispatch('toggle', this.$.foo.checked); разделяет значение foo с другими элементами. - person Thad; 15.02.2018
comment
Тад, я не понимаю последнее предложение в твоем последнем комментарии. Ваш пример кода выше довольно хорош, но у вас есть только один элемент переключения. У меня их 4. Функция _doTap и идентификатор вашего элемента foo представляют собой однозначное сопоставление. Когда вызывается функция _doTap, вы всегда знаете, что за это отвечает foo. Если бы у вас было более одного переключателя, динамически созданного с помощью dom-repeat, то все ваши переключатели вызывали бы одну и ту же функцию _doTap, не так ли? В этом сценарии какое строковое значение вы отправите в первом аргументе/параметре? Как вы можете узнать идентификатор переключателя, вызвавшего _doTap? - person bwfrieds; 15.02.2018
comment
А, я понимаю вашу точку зрения. Я думаю, вы можете нажать на переключатель с помощью e['target'], но я не знаю, как (в вашем случае) они отличаются друг от друга без какого-либо кода. - person Thad; 16.02.2018
comment
РЕШЕНО: я смотрел не на тот event.target. Это неловко. Итак, если мы посмотрим на код Тада, то сработало следующее... _doTap(e) { this.dispatch('toggle', e.target); } Извините за всю эту путаницу. - person bwfrieds; 22.02.2018