What is the alternative to using selectors with props in ngrx

Question

I am reading about selectors on the ngrx website and I stumbled upon selectors with props.

The ngrx team said it is deprecated but they didn't provide alternative to it. I want to use selectors with props in my application.

Is there any other alternative to using selectors with props?

If there is, how do I do it?.

Answer 1

The word "deprecated" in the notice is actually a link, though a hard one to notice due to the color of the banner it's in. It links to a GitHub Issue discussing selectors with props.

That issue raises the concern that, with Angular 12+ being in strict mode by default, developers are likely to run into a shortcoming in the implementation of selectors with props - namely that the prop values are not strongly typed or may be incorrectly typed.

The suggested approach is to use a factory selector. Essentially, instead of passing props as parameters of the selector, you take the props as arguments to a function defined by the selector.

So instead of:

export const getCount = createSelector(
  getCounterValue,
  (counter, props) => counter * props.multiply
);

const count = this.store.select(getCount, 5);

You would use:

export const getCount = (multiply: number) => createSelector(
  getCounterValue,
  (counter) => counter * multiply
);

const count = this.store.select(getCount(5));

Gunnar B.'s comment helpfully links to a migration guide with a section about moving from selectors with props to factory selectors if you need more information.