storage unique object

[ihrwebentwickler]

goal:
i want to use a unique object across the app to keep the data in different components consistent.

Realization Repository-Service:
@Injectable({providedIn: 'root'})
export class ProductRepository {
storeProduct$ = store.pipe(selectAllEntities());

addProduct(changeId: string | null, managerBasket: IManagerBasket | null, managerBaskets: IManagerBasket[] | null,
changeIds: IDropdownRequest[] | null) {
store.update(deleteEntities(1));
store.update(addEntities({
id: 1,
changeId: changeId,
managerBasket: managerBasket,
managerBaskets: managerBaskets,
changeIds: changeIds
}, { prepend: true }));
}
}

i am forced to set an array via update, by writing:
store.update(setEntities({
changeId: changeId,
managerBasket: managerBasket,
managerBaskets: managerBaskets,
changeIds: changeIds
}));

i get:
TS2345: Argument of type '{ id: number; changeId: string | null; managerBasket: IManagerBasket | null; managerBaskets: IManagerBasket[] | null; changeIds: IDropdownRequest[] | null; }' is not assignable to parameter of type 'StoreProduct[]'.   Object literal may only specify known properties, and 'id' does not exist in type 'StoreProduct[]'.

the interface-should be correct:
export interface StoreProduct {
id: number;
changeId: string | null;
managerBasket: IManagerBasket | null;
managerBaskets: IManagerBasket[] | null;
changeIds: IDropdownRequest[] | null;
}

export interface IManagerBasket {
py_cm_ber_id: number;
py_cm_ber_nr: number;
py_cm_ber_txt: string;
py_cm_man_id: number;
py_cm_man_nr: string;
py_cm_man_txt: string;
anz_mika: number;
}

export interface IDropdownRequest {
change_id: string;
kopf_art_id: number;
umstellungswoche: string;
text45: string;
wg_4_txt: string;
}

question 1):
Is this a bug or am I doing something wrong

question 2:
Is there anything to consider conceptually or with best practices that is important when using a store object, it doesn't feel so good to subscribe to many components in order to notice changes?

question 3:
I close e.g. an Angualr material modal, why does the route get lost? I need to write in the modal component, but the route evaluation is openend behind the modal?
onClickOpenArticle(article: IDropdownRequest) {
this.productRepository.addProduct(
article.change_id, this.storeProduct.managerBasket, this.storeProduct.managerBaskets, this.storeProduct.changeIds
);
this.dialogRef.close();
this.router.navigate(['/evaluation']);
}

Thank you very much for the great tool, in the future I would like to deal with it much more intensively and could I contribute something?

[NetanelBasal]

Please format the code. I can't understand anything.

[ihrwebentwickler]

goal:
i want to use a unique object across the app to keep the data in different components consistent, with this service:

`@Injectable({providedIn: 'root'})
export class ProductRepository {
storeProduct$ = store.pipe(selectAllEntities());

addProduct(changeId: string | null, managerBasket: IManagerBasket | null, managerBaskets: IManagerBasket[] | null,
changeIds: IDropdownRequest[] | null) {
store.update(deleteEntities(1));
store.update(addEntities({
id: 1,
changeId: changeId,
managerBasket: managerBasket,
managerBaskets: managerBaskets,
changeIds: changeIds
}, { prepend: true }));
}
}`

i would prefer to write always an new object::

store.update(setEntities({
changeId: changeId,
managerBasket: managerBasket,
managerBaskets: managerBaskets,
changeIds: changeIds
}));

then i get an error:
TS2345: Argument of type '{ id: number; changeId: string | null; managerBasket: IManagerBasket | null; managerBaskets: IManagerBasket[] | null; changeIds: IDropdownRequest[] | null; }' is not assignable to parameter of type 'StoreProduct[]'. Object literal may only specify known properties, and 'id' does not exist in type 'StoreProduct[]'.

the interfaces should be correct:

export interface StoreProduct {
id: number;
changeId: string | null;
managerBasket: IManagerBasket | null;
managerBaskets: IManagerBasket[] | null;
changeIds: IDropdownRequest[] | null;
}

export interface IManagerBasket {
py_cm_ber_id: number;
py_cm_ber_nr: number;
py_cm_ber_txt: string;
py_cm_man_id: number;
py_cm_man_nr: string;
py_cm_man_txt: string;
anz_mika: number;
}

export interface IDropdownRequest {
change_id: string;
kopf_art_id: number;
umstellungswoche: string;
text45: string;
wg_4_txt: string;
}

question 1):
Is this a bug or am I doing something wrong

question 2:
Is there anything to consider conceptually or with best practices that is important when using a store object, it doesn't feel so good to subscribe to many components in order to notice changes?

question 3:
I close e.g. an Angualr material modal, why does the route get lost? I need to use the store in the moda- component, without using the router-navigate, another component (home) is openend. Within the modal-component after the user-click the odal should close, my expectation would be to stay right on the evaluation component where the modal was originally opened.

onClickOpenArticle(article: IDropdownRequest) {
this.productRepository.addProduct(
article.change_id, this.storeProduct.managerBasket, this.storeProduct.managerBaskets, this.storeProduct.changeIds
);
this.dialogRef.close();
this.router.navigate(['/evaluation']);
}

[hakimio]

You are doing sth wrong. As the error indicated setEntities() accepts an array of StoreProduct and you are passing Partial<StoreProduct>.
Fixed version:

store.update(setEntities([{
    id: 1,
    changeId: changeId,
    managerBasket: managerBasket,
    managerBaskets: managerBaskets,
    changeIds: changeIds
}]));

Anyway, if you always have only one object in your collection, might be a better idea to use store properties.