🏭 NgRx Child Selectors

NgRx Plugin for Easy Creation of Child Selectors

Contents

• Installation
• Usage
• Example
• Comparison with createSelector

Installation

NPM: npm install ngrx-child-selectors

Yarn: yarn add ngrx-child-selectors

⚠️ NgRx Child Selectors library requires TypeScript 4.1 or higher.

Usage

createChildSelectors

NgRx Child Selectors plugin provides createChildSelectors function that is used to create memoized and strongly typed child selectors based on the parent selector. It accepts the parent selector as the first, and the object that has the same type as the return value of the parent selector as the second argument:

import { createChildSelectors } from 'ngrx-child-selectors';

export interface State {
  users: User[];
  loading: boolean;
  pagination: Pagination;
}

export const initialState: State = {
  users: [],
  loading: false,
  pagination: { currentPage: 1, itemsPerPage: 10 },
};

export const selectUserState = createFeatureSelector<State>('users');

export const {
  selectUsers,
  selectLoading,
  selectPagination,
} = createChildSelectors(selectUserState, initialState);

export const {
  selectCurrentPage,
  selectItemsPerPage,
} = createChildSelectors(selectPagination, initialState.pagination);

💡 Use the initial state as the second argument when the parent selector is a feature selector.

Also, there is another signature of createChildSelectors function. It accepts the array of the parent state keys as the second argument and creates selectors for the passed keys:

export const {
  selectUsers,
  selectLoading,
} = createChildSelectors(selectUserState, ['users', 'loading']);

createChildSelector

NgRx Child Selectors plugin also provides createChildSelector function that is used to create a single child selector:

export const selectLoading = createChildSelector(selectUserState, 'loading');

Example

See the example project here.

Comparison with createSelector

In the example below you can see the same selectors created with createSelector vs createChildSelectors.

createSelector

export const selectUserState = createFeatureSelector<State>('users');

export const selectUsers = createSelector(
  selectUserState,
  userState => userState.users,
);
export const selectLoading = createSelector(
  selectUserState,
  userState => userState.loading,
);
export const selectPagination = createSelector(
  selectUserState,
  userState => userState.pagination,
);

export const selectCurrentPage = createSelector(
  selectPagination,
  pagination => pagination.currentPage,
);
export const selectItemsPerPage = createSelector(
  selectPagination,
  pagination => pagination.itemsPerPage,
);

createChildSelectors

import { createChildSelectors } from 'ngrx-child-selectors';

export const selectUserState = createFeatureSelector<State>('users');

export const {
  selectUsers,
  selectLoading,
  selectPagination,
} = createChildSelectors(selectUserState, initialState);

export const {
  selectCurrentPage,
  selectItemsPerPage,
} = createChildSelectors(selectPagination, initialState.pagination);