Looking for best practice to use createSelector

[ethan-cao]

Hi,

I was wondering what's the best practice to handle the following case

const selector1 = (state, key, type) => { 
  if  (type === 1) {
     return state.list1.filter(entry => entry.key === key)
  } else {
     return state.list2.filter(entry => entry.key === key)
  }
}

const selector2 = (state) => state.a.b.key

const selector3 = (state) => state.c.d.type

const selector4 = createSelector(
  selector2,
  selector3,
  (key, type) => {
     // how can I use selector1 here? 
     // basically, I wanna use key and type as cache keys to skip calling selector1 if they remain the same as previous call
     // what would be the best way to do it?
  }
)

Many thanks.

[agammann]

Make the chosen list an input to the selector, and do the filtering in the result function:

import { createSelector } from 'reselect';

const selector2 = state => state.a.b.key;
const selector3 = state => state.c.d.type;

const selectList = state =>
  selector3(state) === 1 ? state.list1 : state.list2;

const selector4 = createSelector(
  [selectList, selector2],
  (list, key) => list.filter(entry => entry.key === key)
);

Call selector4(state). Its inputs are the selected array and the key, so it can reuse the filtered result when both are unchanged, even if unrelated parts of the state change. The selected array must be included: caching only by key and type would miss a change to the list's contents.

This preserves your type === 1 / otherwise behavior. Define the selector once, outside a component render, and update the lists immutably so changes produce a new array reference.

I checked this with Reselect 4.1.8 and 5.3.0: unrelated state changes reused the result array; replacing the selected list, changing the key, or switching lists recalculated it. This follows the documented pattern of simple input selectors with calculations in the result function.