reselect: pass multiple parameters to composed selector

Question

I created a selector that is composed of two other selectors:

export const getAvailableFilters = createSelector(
  getOpenedFilterMenu,
  isSaleCategory,
  (filterMenu, isSale) => {
    // .... doing stuff
  },
);

The getOpenedFilterMenu as well as isSaleCategory depend on the redux state and a component prop, but they depend on different props.

When I try to to access the selector like this getAvailableFilters(state, ownProps.streamId, activeCategory.id) the TypeScript Compiler throws an error that the type of the first parameter doesn't match. When I am removing the isSaleCategory selector from the input selectors list, TS doesn't complain. Any idea why that is?

How do I compose selectors that have different depending props?

Answer 1

inputSelectors (getOpenedFilterMenu and isSaleCategory) are called with the same arguments as your reselectselector (state, ownProps.streamId, activeCategory.id). It seems that your inputSelectors and the final selector expect different arguments.

A quick solution might consist of wrapping your inputSelectors into and adapter function to feed them with the expected arguments:

export const getAvailableFilters = createSelector(
  (state, streamId, activeCategoryId) => getOpenedFilterMenu(state, activeCategoryId),
  (state, streamId, activeCategoryId) => isSaleCategory(state, streamId),
  (filterMenu, isSale) => {
    // .... doing stuff
  },
);