Custom Selectors

When ready-made just isn't enough

While NgRx Auto-Entity provides quite a bit of ready-made functionality, tracking state for many of the most common elements of entity state including the usual "custom" aspects such as the currently selected entity, loading flags, etc. there may be cases where you still need to create a custom selector. Even when using prefabricated facades, once you get into extending those facades, custom selectors are not uncommon.

customer.state.ts

import { createSelector } from '@ngrx/store';
import { buildState } from '@briebug/ngrx-auto-entity';

const { 
    selectors: {
        selectIds: customerIds,
        selectEntities: customerEntities
    }, 
    entityState
} = buildState(Customer);

export const mapToEntities = (ids, entities) => 
    ids?.length && entities ? entities[ids[0]] : null;
        
export const firstCustomer = createSelector(
    customerIds,
    customerEntities,
    mapToEntities
);

Nothing New Here

Custom selectors are implemented as you have always implemented them. Nothing new or special there. Parameterized selectors may also still be used. Make sure to extract the entityState property from the return value from buildState if you need to access the whole state (including all of the additional data tracked by Auto-Entity) for a given entity.

Don't forget to destructure the selectors map to pull out the specific selectors required for composition into custom selectors. Also remember that nested structures may be destructured inline with modern javascript as well!

Parameterized Selectors Supported

Note that it is also possible to create parameterized selectors with @ngrx. You may still implement parameterized selectors with Auto-Entity as well:

customer.state.ts

export const findCustomerByName = (ids, entities, {name}) => 
    ids.map(id => entities[id])
           .find(entity => entity.name === name);
        
export const customerByName = createSelector(
    customerIds,
    customerEntities,
    findCustomerByName
);

Follow the necessary precautions and best practices outlined in the ngrx.io documentation when using parameterized selectors. There are some important caveats to be aware of with their use.