or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

development.mdindex.mdmemoization.mdselector-creation.mdselector-creator.mdstructured-selectors.md
tile.json

tessl/npm-reselect

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/reselect@5.1.x

To install, run

npx @tessl/cli install tessl/npm-reselect@5.1.0

index.mddocs/

Reselect

Reselect is a powerful TypeScript library for creating memoized selector functions, commonly used with Redux but compatible with any immutable data structures. It enables efficient computation of derived data by creating selectors that only recompute when their input arguments change, providing significant performance benefits in React/Redux applications.

Package Information

  • Package Name: reselect
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install reselect

Core Imports

import { createSelector, createSelectorCreator, createStructuredSelector } from "reselect";

For CommonJS:

const { createSelector, createSelectorCreator, createStructuredSelector } = require("reselect");

Basic Usage

import { createSelector } from "reselect";

// Define input selectors
const selectTodos = (state) => state.todos;
const selectFilter = (state) => state.filter;

// Create a memoized selector
const selectVisibleTodos = createSelector(
  [selectTodos, selectFilter],
  (todos, filter) => {
    switch (filter) {
      case 'SHOW_COMPLETED':
        return todos.filter(todo => todo.completed);
      case 'SHOW_ACTIVE':
        return todos.filter(todo => !todo.completed);
      default:
        return todos;
    }
  }
);

// Use the selector
const visibleTodos = selectVisibleTodos(state);

Architecture

Reselect is built around several key concepts:

  • Selectors: Functions that compute derived data from state
  • Memoization: Caching mechanism that prevents unnecessary recomputations
  • Composability: Selectors can be used as inputs to other selectors
  • Input Selectors: Functions that extract values from state for the combiner function
  • Result Function (Combiner): Function that computes the final result from input selector outputs
  • Multiple Memoization Strategies: LRU cache, WeakMap-based, and experimental auto-tracking

Capabilities

Selector Creation

Core functionality for creating memoized selectors with customizable options and multiple memoization strategies.

function createSelector<State, Result>(
  selectors: SelectorArray<State>,
  combiner: Combiner<Result>
): OutputSelector<State, Result>;

function createSelector<State, Result>(
  selectors: SelectorArray<State>,
  combiner: Combiner<Result>,
  options: CreateSelectorOptions
): OutputSelector<State, Result>;

Selector Creation

Pre-Typed Selectors

Create pre-typed versions of selector creators with predefined state types.

interface CreateSelectorFunction {
  withTypes: <OverrideStateType>() => CreateSelectorFunction<MemoizeFunction, ArgsMemoizeFunction, OverrideStateType>;
}

interface StructuredSelectorCreator {
  withTypes: <OverrideStateType>() => StructuredSelectorCreator<OverrideStateType>;
}

Selector Creator Customization

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

function createSelectorCreator<MemoizeFunction>(
  options: { memoize: MemoizeFunction }
): CreateSelectorFunction<MemoizeFunction>;

function createSelectorCreator<MemoizeFunction>(
  memoizeFunc: MemoizeFunction,
  ...memoizeOptions: Parameters<MemoizeFunction>
): CreateSelectorFunction<MemoizeFunction>;

Selector Creator Customization

Structured Selectors

Utility for creating selectors that return objects with the same keys as the input selectors object.

function createStructuredSelector<TSelectors extends SelectorsObject>(
  selectors: TSelectors
): OutputSelector<GetStateFromSelectors<TSelectors>, SelectorResultsMap<TSelectors>>;

function createStructuredSelector<TSelectors extends SelectorsObject>(
  selectors: TSelectors,
  selectorCreator: CreateSelectorFunction
): OutputSelector<GetStateFromSelectors<TSelectors>, SelectorResultsMap<TSelectors>>;

Structured Selectors

Memoization Strategies

Multiple memoization implementations optimized for different use cases and performance characteristics.

function lruMemoize<Args extends readonly unknown[], Return>(
  func: (...args: Args) => Return,
  options?: LruMemoizeOptions
): (...args: Args) => Return & DefaultMemoizeFields;

function weakMapMemoize<Args extends readonly unknown[], Return>(
  func: (...args: Args) => Return,
  options?: WeakMapMemoizeOptions
): (...args: Args) => Return & DefaultMemoizeFields;

function unstable_autotrackMemoize<Args extends readonly unknown[], Return>(
  func: (...args: Args) => Return
): (...args: Args) => Return & DefaultMemoizeFields;

Memoization Strategies

Development Mode Utilities

Development-only stability checks and debugging utilities to help identify common selector issues.

function setGlobalDevModeChecks(devModeChecks: Partial<DevModeChecks>): void;

interface DevModeChecks {
  inputStabilityCheck: DevModeCheckFrequency;
  identityFunctionCheck: DevModeCheckFrequency;
}

type DevModeCheckFrequency = 'once' | 'always' | 'never';

Development Mode Utilities

Core Types

type Selector<State = any, Result = unknown, Params extends readonly any[] = any[]> = 
  (state: State, ...params: Params) => Result;

type SelectorArray<State = any> = readonly Selector<State>[];

interface OutputSelector<State, Result, Params extends readonly any[] = any[]> 
  extends Selector<State, Result, Params> {
  resultFunc: Combiner<Result>;
  memoize: UnknownMemoizer;
  argsMemoize: UnknownMemoizer;
  dependencies: SelectorArray<State>;
  recomputations: () => number;
  resetRecomputations: () => void;
  dependencyRecomputations: () => number;
  resetDependencyRecomputations: () => void;
  lastResult: () => Result;
  memoizedResultFunc: (...args: any[]) => Result;
}

type Combiner<Result> = (...args: any[]) => Result;

type EqualityFn<T = any> = (a: T, b: T) => boolean;

interface CreateSelectorOptions<MemoizeFunction = typeof weakMapMemoize> {
  memoize?: MemoizeFunction;
  memoizeOptions?: ExtractMemoizerFields<MemoizeFunction>;
  argsMemoize?: UnknownMemoizer;
  argsMemoizeOptions?: unknown[];
  devModeChecks?: Partial<DevModeChecks>;
}

interface DefaultMemoizeFields {
  clearCache: () => void;
  resultsCount: () => number;
  resetResultsCount: () => void;
}