My State uses a custom sort:
export function sort(a: Item, b: Item): number {
return a.isabstract === b.isabstract ? a.name.localeCompare(b.name) : a.isabstract ? 1 : -1;
}
export const adapter: EntityAdapter<Item> = createEntityAdapter<Item>({
sortComparer: sort,
});
And then in my reducer I do an update:
on(ItemActions.getExtendedDataSuccess, (state, { data }) => {
const update: UpdateStr<Item> = {
id: data.itemid,
changes: { extendeddata: data.extendeddata },
};
return adapter.updateOne(update, state);
}),
When the item is updated, I can see that the sort method is being called as expected.
In my component.ts, I have:
allitems: Array<Item>;
private items$: Observable<Dictionary<Item>> = this.coreSelectService.itemList$;
...
this.items$.pipe(takeWhile(() => this.alive)).subscribe(i => {
this.allitems = Object.values(i).filter(m => m.id !== "exclude");
});
And in my component.html:
<div *ngFor="let item of allitems">
{{ item.name }}
</div>
On first load, the items are in the correct order, ordered by name, with abstract items at the bottom of the list, like:
- A Item
- B Item
- Z Item
- Abstract Item
However, if I then trigger getExtendedDataSuccess on "A Item", the update occurs, the sort happens in the reducer, but in my component, the updated item goes to the bottom of the list, like:
- B Item
- Z Item
- Abstract Item
- A Item
It feels as if putting another sort in the component should be redundant, but I don't get why the order is being changed here?
Any tips please?