Redux Единственный источник правды - Как работать с субэлементами, которые вычисляют свойства, не перезаписываясь при последующих изменениях хранилища? - PullRequest
Новая
       13

Redux Единственный источник правды - Как работать с субэлементами, которые вычисляют свойства, не перезаписываясь при последующих изменениях хранилища?

0 голосов
/ 13 мая 2019

У меня есть элемент для редактирования «историй». Исторический объект имеет много свойств, таких как: title, category, jurisdiction, gallery, sourcelinks и т. Д.

Некоторые свойства должны быть «вычислены», как sourcelinks, для которого я создал дочерний элемент , который получил список текущих ссылок, переданных от родителя, добавляет к нему новые ссылки, чем обратно в родительский элемент Я запрашиваю дочерний элемент и получаю измененный список (используя метод получения) в момент обновления истории.

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

<sourcelink-input
  .sourcelinks="${this.story ? this.story.Sourcelinks : []}">
</sourcelink-input>

...

stateChanged(state: RootState) {
  this.story = currentStorySelector(state);
}

async _updateStory() {
  const story: StoryUpload = {
    id: parseInt(this.storyIdInput.value),
    title: this.titleInput.value,
    themeId: parseInt(this.themeIdInput.value),
    description: this.textEditor.getValue(),
    sourcelinks: this.sourcelinkInput.sourcelinks,
    ...
  };

  if (this.fieldsAreValid(story)) {
    await store.dispatch(updateStory(story));
  }
}

ребенок: 

export class SrcLinkInput extends LitElement {

  @property({type: Array})
  sourcelinks: Sourcelink[] = [];

  sourcelinkUrl?: TextInput;
  sourcelinkAlias?: TextInput;

  render() {
    return html`
      <text-input type="text" id="link-url" placeholder="url"></text-input>
      <text-input type="text" id="link-alias" placeholder="alias"></text-input>

      <button class="btn save-link-btn" @click="${() => this.addPair()}"></button>
    `;
  }

  addPair() {
    if (!this.sourcelinkUrl || !this.sourcelinkAlias) return;
    this.sourcelinks = [...this.sourcelinks, {url: this.sourcelinkUrl.value, alias: this.sourcelinkAlias.value}];
    this.sourcelinkUrl.value = '';
    this.sourcelinkAlias.value = '';
  }

  removePair(idx: number) {
    ...
  }
}

Одним из решений было бы сэкономить sourcelinks на каждом изменении, что означало бы действие creator -> server -> reducer. Но это будет означать довольно много сетевых запросов, особенно при использовании того же шаблона с остальными входами / потомками.

Или я должен переместить: 

this.story = currentStorySelector(state);

из stateChanged?

Буду признателен за ваши предложения.

Спасибо.

...