Как вы бы создали объект?

Question

[Константин]

Я получаю данные от сервера - массив категорий: interface Category { id: number, name: string, items: []}

Я хочу на основе каждой категории создать группу, потому как в категории естьitems: [], чтобы группа работала как dropdown элемент - открывалась и скрывалась по клику.

Представим, что группа определена так: interface Group { id: number, name: elements: []}.

Предположим, что в родительском компоненте я получаю категории:

public categories$: Observable<Category[]>;

И в шаблоне этого компонента вывожу категории в группу:

<app-category-group *ngFor="let cat of categories$  | async"></app-category-group>

Как не смешивать типы Category и Group а сделать так - чтобы неважно какой будет контент вGroup. В каком месте это делать - в родителе после получения категорий - преобразовывать в другой тип? При этом не хочется мутировать исходные данные

Comments

[Антон Швец]

Не очень понятно, но выглядит как типичный стейт и вычислимое от него.

[Константин]

Антон Швец, если кратко и более понятно. Есть блок с header и content. По клику на header - контент показывается или скрывается. Нужно отстроит таких несколько блоков по входному массиву типа Category[] (возвращается от сервера). Но завтра это может быть другой тип. Хочу это реалиовать используя Redux. Но для начала понять - нужно мне ввести промужуточный тип `BlockUI {id: number, opened: boolean, content: Category[], name: string}`. Чтобы иметь возможность этоб блок положить в Redux. Для открытия и закрытия.

[Антон Швец]

Константин, есть такое понятие как ui-state. Т.е. есть состояние данных и есть связанные с ними юи-состояния.
Только туда лучше не категории класть, а айди их, т.е. нормализовывать данные, как в бд.

[Константин]

Антон Швец, можно небольшой пример? Когда на входе тип `Category[]`. Правильно ли будет так:

GroupsComponent:

public categories$: Observable<Category[]>;
public categoriesGroup$: Observable<CategoryGroup[]>;

constructor() {
   this.categoriesGroup$ = this.categories.pipe((map(category) => {name:"Group1", items: category} as Group)
}

}

Внутри GroupsComponent шаблона:

<app-groups-component>
   <app-group-component *ngFor="let groupCategory of categoriesGroup$" [group]="groupCategory"></app-group-component>
</app-groups-component>

Я не понимаю как отвязать стейт от реальных приходящих данных и от типа UI?

[Антон Швец]

Константин, я не очень понимаю какие у тебя связи вообще