Selectors for Redux - memoized functions for computing derived data from state.
—
Advanced functionality for creating customized selector creators with specific memoization strategies and configuration options.
Creates a customized createSelector function with pre-configured memoization and options.
/**
* Creates a customized createSelector function with specific memoization options
* @param options - Configuration object with memoize function and options
* @returns Customized CreateSelectorFunction instance
*/
function createSelectorCreator<MemoizeFunction>(
options: {
memoize: MemoizeFunction;
memoizeOptions?: ExtractMemoizerFields<MemoizeFunction>;
}
): CreateSelectorFunction<MemoizeFunction>;
/**
* Legacy overload - creates a selector creator with memoize function and options
* @param memoizeFunc - Memoization function to use
* @param memoizeOptions - Options passed to the memoization function
* @returns Customized CreateSelectorFunction instance
*/
function createSelectorCreator<MemoizeFunction>(
memoizeFunc: MemoizeFunction,
...memoizeOptions: Parameters<MemoizeFunction>
): CreateSelectorFunction<MemoizeFunction>;Basic Usage:
import { createSelectorCreator, lruMemoize } from "reselect";
// Create a selector creator with LRU memoization
const createSelectorWithLRU = createSelectorCreator({
memoize: lruMemoize,
memoizeOptions: { maxSize: 5 }
});
// Use the custom selector creator
const selectExpensiveData = createSelectorWithLRU(
[selectLargeDataset],
(data) => performExpensiveComputation(data)
);Legacy Syntax:
import { createSelectorCreator, lruMemoize } from "reselect";
// Legacy syntax (still supported)
const createSelectorWithLRU = createSelectorCreator(
lruMemoize,
{ maxSize: 5 }
);Auto-tracking Example:
import { createSelectorCreator, unstable_autotrackMemoize } from "reselect";
// Create selector creator with auto-tracking memoization
const createAutotrackSelector = createSelectorCreator({
memoize: unstable_autotrackMemoize
});
const selectNestedData = createAutotrackSelector(
[state => state.users],
(users) => users.map(user => user.profile.name) // Only recomputes if profile.name changes
);The type of customized selector creator functions returned by createSelectorCreator.
interface CreateSelectorFunction<MemoizeFunction = typeof weakMapMemoize> {
/** Create selector with array of input selectors */
<State, Result>(
selectors: SelectorArray<State>,
combiner: Combiner<Result>
): OutputSelector<State, Result>;
/** Create selector with array of input selectors and options */
<State, Result>(
selectors: SelectorArray<State>,
combiner: Combiner<Result>,
options: CreateSelectorOptions<MemoizeFunction>
): OutputSelector<State, Result>;
/** Variadic overloads for inline selectors (1-12 selectors) */
<State, Res1, Result>(
selector1: Selector<State, Res1>,
combiner: (res1: Res1) => Result
): OutputSelector<State, Result>;
<State, Res1, Res2, Result>(
selector1: Selector<State, Res1>,
selector2: Selector<State, Res2>,
combiner: (res1: Res1, res2: Res2) => Result
): OutputSelector<State, Result>;
// Additional overloads for 3-12 input selectors...
}WeakMap Memoization (Default):
import { createSelectorCreator, weakMapMemoize } from "reselect";
const createWeakMapSelector = createSelectorCreator({
memoize: weakMapMemoize,
memoizeOptions: {
equalityCheck: (a, b) => a.id === b.id // Custom equality check
}
});
const selectUserData = createWeakMapSelector(
[selectUser],
(user) => processUserData(user)
);LRU Memoization with Custom Size:
import { createSelectorCreator, lruMemoize } from "reselect";
const createLRUSelector = createSelectorCreator({
memoize: lruMemoize,
memoizeOptions: {
maxSize: 50, // Cache up to 50 results
equalityCheck: (a, b) => JSON.stringify(a) === JSON.stringify(b)
}
});
const selectProcessedItems = createLRUSelector(
[selectItems, selectFilters],
(items, filters) => applyFiltersAndSort(items, filters)
);Custom Memoization Function:
import { createSelectorCreator } from "reselect";
// Custom memoization that only caches the last result
function simpleMemoize(func) {
let lastArgs;
let lastResult;
return (...args) => {
if (!lastArgs || !shallowEqual(args, lastArgs)) {
lastResult = func(...args);
lastArgs = args;
}
return lastResult;
};
}
const createSimpleSelector = createSelectorCreator({
memoize: simpleMemoize
});
const selectSimpleData = createSimpleSelector(
[selectInput],
(input) => transformInput(input)
);import {
createSelectorCreator,
lruMemoize,
type CreateSelectorOptions
} from "reselect";
// Selector creator with both memoization and dev mode configuration
const createDebugSelector = createSelectorCreator({
memoize: lruMemoize,
memoizeOptions: { maxSize: 10 }
});
// Override dev mode checks when creating specific selectors
const selectDebugData = createDebugSelector(
[selectComplexState],
(state) => processComplexState(state),
{
// Override memoization for this specific selector
memoize: weakMapMemoize,
devModeChecks: {
inputStabilityCheck: 'always',
identityFunctionCheck: 'never'
}
}
);type ExtractMemoizerFields<MemoizeFunction> =
MemoizeFunction extends (func: any, ...options: infer Options) => any
? Options
: never;
interface CreateSelectorOptions<MemoizeFunction = typeof weakMapMemoize> {
memoize?: MemoizeFunction;
memoizeOptions?: ExtractMemoizerFields<MemoizeFunction>;
devModeChecks?: Partial<DevModeChecks>;
argsMemoize?: UnknownMemoizer;
argsMemoizeOptions?: unknown[];
}
type MemoizeOptionsFromParameters<MemoizeParameters> =
MemoizeParameters extends readonly [any, ...infer Rest]
? Rest
: never;
interface OverrideMemoizeOptions<MemoizeFunction = UnknownMemoizer> {
memoize: MemoizeFunction;
argsMemoize?: UnknownMemoizer;
}Install with Tessl CLI
npx tessl i tessl/npm-reselect