Skip to main content

Reusing ngrx selectors to compose state

Author: @Phhansen

Reusing ngrx selectors to compose state

Here is an example of using NgRx selectors alongside @rx-angular/state to compose reusable state selectors.

Imagine the following ComponentState setup:

interface Item {
id: string;
name: string;

interface ComponentState {
items: { [id: string]: Item };
visibleIds: string[];

Now we want to derive a list of visible items based on all items and the array of visibleIds. We can do so by using the createSelector() function from NgRx.

const selectItems = (state: ComponentState) => state.items;

const selectVisibleIds = (state: ComponentState) => state.visibleIds;

const selectVisibleItems = createSelector(
(visibleIds, items) => => items[id])

Using this in our component will look like this:

import { select } from '@ngrx/store';

export class ItemListComponent extends RxState<ComponentState> {
readonly visibleItems$ =;

constructor() {