CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-reselect

Selectors for Redux - memoized functions for computing derived data from state.

Pending
Overview
Eval results
Files

selector-creator.mddocs/

Selector Creator Customization

Advanced functionality for creating customized selector creators with specific memoization strategies and configuration options.

Capabilities

createSelectorCreator

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
);

CreateSelectorFunction Interface

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...
}

Custom Memoization Examples

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)
);

Advanced Configuration

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'
    }
  }
);

Types

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

docs

development.md

index.md

memoization.md

selector-creation.md

selector-creator.md

structured-selectors.md

tile.json