How to sort the objects with select

[bhagavan44]

Hello All,

I need help with sorting of objects with selector. I have following 2 selectors, where the 1st with out sort is working fine, 2nd one with sort is not working. Can anybody tell me what I am doing wrong in here?

@Selector()
static getData(state: AccountStateModel) {
    return state.data;
}

@Selector()
static getSortedData(state: AccountStateModel) {
    if (state.data) {
        return state.data.sort((a, b) => (a.name > b.name) ? -1 : 1);
    }
    return state.data;
}

[markwhitfeld]

Hi @bhagavan44 The issue here is that your call the the sort method would cause a mutation of the state (javascript sort mutates the underlying array). I would recommend 2 things:

1. Clone the array before sorting it:

const sorted = [...state.data].sort((a, b) => (a.name > b.name) ? -1 : 1);

2. Use an input selector that is focused on the data property, as opposed to the whole account state.
   This would ensure that the selector would only recalculate when the data property changes, and not when any property of the AccountState changes.
   Note: for the following code, ensure that the selector option injectContainerState is set to false (see recommendation here) or move this selector out of the AccountState class (see meta selectors) so that the container state is not injected as the first argument.

@Selector([AccountState.getData])
static getSortedData(data: AccountStateModel['data']) {
    if (data) {
        return [...data].sort((a, b) => (a.name > b.name) ? -1 : 1);
    }
    return data;
}

PS. I would also recommend making provision for equality in your sort lambda:

(a, b) => (a.name > b.name) ? -1 : ( a.name === b.name ? 0 : 1 )

[bhagavan44]

Thank you @markwhitfeld for the detailed response, it was very much helpful to me.