Angular 2, ngrx/store, RxJS и древовидные данные

Я пытался выяснить, как использовать оператор select в сочетании с другими операторами rxjs для запроса структуры данных дерева (нормализованной в хранилище до плоского списка) таким образом, чтобы он сохранял ссылочную целостность для ChangeDetectionStrategy.OnPush, но мои лучшие попытки приводят к тому, что все дерево будет отменено, когда какая-либо часть дерева изменится. У кого-нибудь есть идеи? Если вы рассматриваете следующий интерфейс как представитель данных в хранилище:

export interface TreeNodeState {
 id: string;
 text: string;
 children: string[] // the ids of the child nodes
}
export interface ApplicationState {
 nodes: TreeNodeState[]
}

Ответы

Ответ 1

Если вы хотите переосмыслить проблему, вы можете использовать оператор Rxjs scan:

  • Если не существует предыдущего ApplicationState, примите первый. Перевести его в TreeNodes рекурсивно. Поскольку это фактический объект, rxjs не участвует.
  • При получении нового состояния приложения, то есть при сканировании, реализуйте функцию, которая мутирует предыдущие узлы с использованием принятого состояния и возвращает предыдущие узлы в операторе сканирования. Это гарантирует вам ссылочную целостность.
  • Теперь у вас может возникнуть новая проблема, так как изменения в мутировавших узлах дерева могут быть недоступны. Если да, просмотрите дорожку путем создания подписи для каждого node или рассмотрите возможность добавления changeDetectorRef в node (предоставляется при помощи рендеринга компонента node), что позволяет отмечать компонент для обновления. Это, скорее всего, будет работать лучше, поскольку вы можете пойти с изменить стратегию обнаружения OnPush.

псевдокод:

state$.scan((state, nodes) => nodes ? mutateNodesBy(nodes, state) : stateToNodes(state))

Выход гарантированно сохраняет ссылочную целостность (где это возможно), поскольку узлы строятся один раз, а затем только мутируются.