0
# Reselect
1
2
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.
3
4
## Package Information
5
6
- **Package Name**: reselect
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install reselect`
10
11
## Core Imports
12
13
```typescript
14
import { createSelector, createSelectorCreator, createStructuredSelector } from "reselect";
15
```
16
17
For CommonJS:
18
19
```javascript
20
const { createSelector, createSelectorCreator, createStructuredSelector } = require("reselect");
21
```
22
23
## Basic Usage
24
25
```typescript
26
import { createSelector } from "reselect";
27
28
// Define input selectors
29
const selectTodos = (state) => state.todos;
30
const selectFilter = (state) => state.filter;
31
32
// Create a memoized selector
33
const selectVisibleTodos = createSelector(
34
[selectTodos, selectFilter],
35
(todos, filter) => {
36
switch (filter) {
37
case 'SHOW_COMPLETED':
38
return todos.filter(todo => todo.completed);
39
case 'SHOW_ACTIVE':
40
return todos.filter(todo => !todo.completed);
41
default:
42
return todos;
43
}
44
}
45
);
46
47
// Use the selector
48
const visibleTodos = selectVisibleTodos(state);
49
```
50
51
## Architecture
52
53
Reselect is built around several key concepts:
54
55
- **Selectors**: Functions that compute derived data from state
56
- **Memoization**: Caching mechanism that prevents unnecessary recomputations
57
- **Composability**: Selectors can be used as inputs to other selectors
58
- **Input Selectors**: Functions that extract values from state for the combiner function
59
- **Result Function (Combiner)**: Function that computes the final result from input selector outputs
60
- **Multiple Memoization Strategies**: LRU cache, WeakMap-based, and experimental auto-tracking
61
62
## Capabilities
63
64
### Selector Creation
65
66
Core functionality for creating memoized selectors with customizable options and multiple memoization strategies.
67
68
```typescript { .api }
69
function createSelector<State, Result>(
70
selectors: SelectorArray<State>,
71
combiner: Combiner<Result>
72
): OutputSelector<State, Result>;
73
74
function createSelector<State, Result>(
75
selectors: SelectorArray<State>,
76
combiner: Combiner<Result>,
77
options: CreateSelectorOptions
78
): OutputSelector<State, Result>;
79
```
80
81
[Selector Creation](./selector-creation.md)
82
83
### Pre-Typed Selectors
84
85
Create pre-typed versions of selector creators with predefined state types.
86
87
```typescript { .api }
88
interface CreateSelectorFunction {
89
withTypes: <OverrideStateType>() => CreateSelectorFunction<MemoizeFunction, ArgsMemoizeFunction, OverrideStateType>;
90
}
91
92
interface StructuredSelectorCreator {
93
withTypes: <OverrideStateType>() => StructuredSelectorCreator<OverrideStateType>;
94
}
95
```
96
97
### Selector Creator Customization
98
99
Advanced functionality for creating customized selector creators with specific memoization and configuration options.
100
101
```typescript { .api }
102
function createSelectorCreator<MemoizeFunction>(
103
options: { memoize: MemoizeFunction }
104
): CreateSelectorFunction<MemoizeFunction>;
105
106
function createSelectorCreator<MemoizeFunction>(
107
memoizeFunc: MemoizeFunction,
108
...memoizeOptions: Parameters<MemoizeFunction>
109
): CreateSelectorFunction<MemoizeFunction>;
110
```
111
112
[Selector Creator Customization](./selector-creator.md)
113
114
### Structured Selectors
115
116
Utility for creating selectors that return objects with the same keys as the input selectors object.
117
118
```typescript { .api }
119
function createStructuredSelector<TSelectors extends SelectorsObject>(
120
selectors: TSelectors
121
): OutputSelector<GetStateFromSelectors<TSelectors>, SelectorResultsMap<TSelectors>>;
122
123
function createStructuredSelector<TSelectors extends SelectorsObject>(
124
selectors: TSelectors,
125
selectorCreator: CreateSelectorFunction
126
): OutputSelector<GetStateFromSelectors<TSelectors>, SelectorResultsMap<TSelectors>>;
127
```
128
129
[Structured Selectors](./structured-selectors.md)
130
131
### Memoization Strategies
132
133
Multiple memoization implementations optimized for different use cases and performance characteristics.
134
135
```typescript { .api }
136
function lruMemoize<Args extends readonly unknown[], Return>(
137
func: (...args: Args) => Return,
138
options?: LruMemoizeOptions
139
): (...args: Args) => Return & DefaultMemoizeFields;
140
141
function weakMapMemoize<Args extends readonly unknown[], Return>(
142
func: (...args: Args) => Return,
143
options?: WeakMapMemoizeOptions
144
): (...args: Args) => Return & DefaultMemoizeFields;
145
146
function unstable_autotrackMemoize<Args extends readonly unknown[], Return>(
147
func: (...args: Args) => Return
148
): (...args: Args) => Return & DefaultMemoizeFields;
149
```
150
151
[Memoization Strategies](./memoization.md)
152
153
### Development Mode Utilities
154
155
Development-only stability checks and debugging utilities to help identify common selector issues.
156
157
```typescript { .api }
158
function setGlobalDevModeChecks(devModeChecks: Partial<DevModeChecks>): void;
159
160
interface DevModeChecks {
161
inputStabilityCheck: DevModeCheckFrequency;
162
identityFunctionCheck: DevModeCheckFrequency;
163
}
164
165
type DevModeCheckFrequency = 'once' | 'always' | 'never';
166
```
167
168
[Development Mode Utilities](./development.md)
169
170
## Core Types
171
172
```typescript { .api }
173
type Selector<State = any, Result = unknown, Params extends readonly any[] = any[]> =
174
(state: State, ...params: Params) => Result;
175
176
type SelectorArray<State = any> = readonly Selector<State>[];
177
178
interface OutputSelector<State, Result, Params extends readonly any[] = any[]>
179
extends Selector<State, Result, Params> {
180
resultFunc: Combiner<Result>;
181
memoize: UnknownMemoizer;
182
argsMemoize: UnknownMemoizer;
183
dependencies: SelectorArray<State>;
184
recomputations: () => number;
185
resetRecomputations: () => void;
186
dependencyRecomputations: () => number;
187
resetDependencyRecomputations: () => void;
188
lastResult: () => Result;
189
memoizedResultFunc: (...args: any[]) => Result;
190
}
191
192
type Combiner<Result> = (...args: any[]) => Result;
193
194
type EqualityFn<T = any> = (a: T, b: T) => boolean;
195
196
interface CreateSelectorOptions<MemoizeFunction = typeof weakMapMemoize> {
197
memoize?: MemoizeFunction;
198
memoizeOptions?: ExtractMemoizerFields<MemoizeFunction>;
199
argsMemoize?: UnknownMemoizer;
200
argsMemoizeOptions?: unknown[];
201
devModeChecks?: Partial<DevModeChecks>;
202
}
203
204
interface DefaultMemoizeFields {
205
clearCache: () => void;
206
resultsCount: () => number;
207
resetResultsCount: () => void;
208
}
209
```