createSelector | Reselect (original) (raw)

Accepts one or more "input selectors" (either as separate arguments or a single array), a single "result function", and an optional options object, and generates a memoized selector function.

The Redux docs usage page on Deriving Data with Selectors covers the purpose and motivation for selectors, why memoized selectors are useful, and typical Reselect usage patterns.

const selectTodosByCategory = createSelector(
  [
    // Pass input selectors with typed arguments
    (state: RootState) => state.todos,
    (state: RootState, category: string) => category
  ],
  // Extracted values are passed to the result function for recalculation
  (todos, category) => {
    return todos.filter(t => t.category === category)
  }
)

Parameters​

Name Description
inputSelectors An array of input selectors, can also be passed as separate arguments.
resultFunc A function that takes the results of the input selectors as separate arguments.
createSelectorOptions? An optional options object that allows for further customization per selector.

Returns​

A memoized output selector.

Output Selector Fields​

The output selectors created by createSelector have several additional properties attached to them:

Name Description
resultFunc The final function passed to createSelector.
memoizedResultFunc The memoized version of resultFunc.
lastResult Returns the last result calculated by memoizedResultFunc.
dependencies The array of the input selectors used by createSelector to compose resultFunc.
recomputations Counts the number of times memoizedResultFunc has been recalculated.
resetRecomputations Resets the count of recomputations count to 0.
dependencyRecomputations Counts the number of times the input selectors (dependencies) have been recalculated. This is distinct from recomputations, which tracks the recalculations of the result function.
resetDependencyRecomputations Resets the dependencyRecomputations count to 0.
memoize Function used to memoize the resultFunc.
argsMemoize Function used to memoize the arguments passed into the output selector.

Type Parameters​

Name Description
InputSelectors The type of the input selectors array.
Result The return type of the result function as well as the output selector.
OverrideMemoizeFunction The type of the optional memoize function that could be passed into the options object to override the original memoize function that was initially passed into createSelectorCreator.
OverrideArgsMemoizeFunction The type of the optional argsMemoize function that could be passed into the options object to override the original argsMemoize function that was initially passed into createSelectorCreator.

Defining a Pre-Typed createSelector​

As of Reselect 5.1.0, you can create a "pre-typed" version of createSelector where the state type is predefined. This allows you to set the state type once, eliminating the need to specify it with every createSelector call.

To do this, you can call createSelector.withTypes<StateType>():

createSelector/withTypes.ts

import { createSelector } from 'reselect'

export interface RootState {
  todos: { id: number; completed: boolean }[]
  alerts: { id: number; read: boolean }[]
}

export const createAppSelector = createSelector.withTypes<RootState>()

const selectTodoIds = createAppSelector(
  [
    // Type of `state` is set to `RootState`, no need to manually set the type
    state => state.todos
  ],
  todos => todos.map(({ id }) => id)
)

Import and use the pre-typed createAppSelector instead of the original, and the type for state will be used automatically.

Known Limitations

Currently this approach only works if input selectors are provided as a single array.

If you pass the input selectors as separate inline arguments, the parameter types of the result function will not be inferred. As a workaround you can either

  1. Wrap your input selectors in a single array
  2. You can annotate the parameter types of the result function:

createSelector/annotateResultFunction.ts

import { createSelector } from 'reselect'

interface Todo {
  id: number
  completed: boolean
}

interface Alert {
  id: number
  read: boolean
}

export interface RootState {
  todos: Todo[]
  alerts: Alert[]
}

export const createAppSelector = createSelector.withTypes<RootState>()

const selectTodoIds = createAppSelector(
  // Type of `state` is set to `RootState`, no need to manually set the type
  state => state.todos,
  // ❌ Known limitation: Parameter types are not inferred in this scenario
  // so you will have to manually annotate them.
  (todos: Todo[]) => todos.map(({ id }) => id)
)

tip

You can also use this API with createSelectorCreator to create a pre-typed custom selector creator:

createSelector/createAppSelector.ts

import microMemoize from 'micro-memoize'
import { shallowEqual } from 'react-redux'
import { createSelectorCreator, lruMemoize } from 'reselect'

export interface RootState {
  todos: { id: number; completed: boolean }[]
  alerts: { id: number; read: boolean }[]
}

export const createAppSelector = createSelectorCreator({
  memoize: lruMemoize,
  argsMemoize: microMemoize,
  memoizeOptions: {
    maxSize: 10,
    equalityCheck: shallowEqual,
    resultEqualityCheck: shallowEqual
  },
  argsMemoizeOptions: {
    isEqual: shallowEqual,
    maxSize: 10
  },
  devModeChecks: {
    identityFunctionCheck: 'never',
    inputStabilityCheck: 'always'
  }
}).withTypes<RootState>()

const selectReadAlerts = createAppSelector(
  [
    // Type of `state` is set to `RootState`, no need to manually set the type
    state => state.alerts
  ],
  alerts => alerts.filter(({ read }) => read)
)