How to call selector inside selector with parameter in ngrx?

user_10932853 0
Viewed 887

How to call selector inside selector in ngrx?

I have selectors from the adapter:

const { selectAll, selectEntities } = productAdapter.getSelectors();

And another selectors to get the products and then the product by id I pass in the props.

const getProductsEntities = createSlector(getProductState, (state) => selectEntites(state));

const selectProductById = createSelector(getProductsEntities , (entities, props) => {
 return entities[props?.productId]
});

Now I want to do another selector and use the selectProductById selector.

const selectProductViewById = createSelector(
 selectProductById,

 (product) => {
   ...
 } 
)

productView$ = this.store.pipe(select(selectProductViewById, { id: 1 });

But this is not working. Also I get error that the parameter passing is wrong.

So how to call selector inside selector with parameter?

ngrx angular
2 Answers

First, you don't have to create a new getProductsEntities selector by calling createSelector. You can use selectEntities directly in the select call to store. Or if you prefer another name you can simply do:

const getProductsEntities = selectEntities;

But to answer your question, here is how to implement a selector that takes a parameter as input using factory selectors:

const selectProductById = (productId: string) => createSelector(
  getProductsEntities,
  (entities) => entities[productId]
);

const selectProductViewById = (productId: string) => createSelector(
 selectProductById(productId),
 (product) => {
   ...
 } 
)

productView$ = this.store.select(selectProductViewById(1));
user_16110980

In the selector you're using props?.productId but when you call the selector you use { id: 1 }.

This should be the same property key.

user_101121240
Related