What does Selector do?

AngularJunior~1 min read

Selector in NgRx is a function for reading the data a component needs from the store.

It does not change the state, it just extracts what the component needs from it.

Say the store holds:

{
  user: { id: 1, name: 'Maria' },
  cart: { items: [ ... ] }
}

To get just the user's name, you write:

const selectUserName = createSelector(
  state => state.user,
  user => user.name
);

And then in the component:

this.store.select(selectUserName).subscribe(name => {
  console.log(name);
});

Convenient. No need to manually dig deep into the store every time.
Reusable. One selector across different components.
Performant. createSelector caches the result and does not notify subscribers if the data hasn't changed.

Selector is like a filter: it shows the component only the piece of state it needs. The store is large, but you see only what matters.

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.