RxJS sort order on update going wrong in component

Viewed 88

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?

0 Answers
Related