JS Built-ins
← redux-toolkit10 / 22
redux-toolkitcreateSelectorintermediate

Derived Selector with Multiple Inputs

📖 Usage Example
const { createSelector } = ReduxToolkit
const selectFiltered = createSelector(
  state => state.items,
  state => state.filter,
  (items, filter) => items.filter(i => i.category === filter)
)

Multiple input selectors let you combine data from different parts of state in a single memoized computation.

Derived Selector with Multiple Inputs

createSelector can take multiple input selectors. The result function receives their outputs as separate arguments, letting you derive data from multiple slices of state.

Challenge: Create selectFiltered that filters items by category.

selectFiltered({ items: [{id:1,category:'a'},{id:2,category:'b'}], filter:'a' })
// → [{ id: 1, category: 'a' }]
💡 Hints (3)
  • • Pass multiple input selectors before the result function: `createSelector(sel1, sel2, (a, b) => ...)`.
  • • The result function is only re-run when any input selector returns a new reference.
  • • The filter function `items.filter(item => item.category === filter)` returns a new array.