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(selectVisibleIds, selectItems, (visibleIds, items) => visibleIds.map((id) => items[id]));

Using this in our component will look like this:

Class Based (Classic)

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

@Component()
export class ItemListComponent extends RxState<ComponentState> {
  readonly visibleItems$ = this.state.select(select(selectVisibleItems));

  constructor() {
    super();
  }
}

Functional Creation (NEW)

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

@Component()
export class ItemListComponent {
  readonly #state = rxState<ComponentState>();
  readonly visibleItems$ = this.#state.select(select(selectVisibleItems));
}