reselect
- Version 5.1.1
- Published
- 646 kB
- No dependencies
- MIT license
Install
npm i reselect
yarn add reselect
pnpm add reselect
Overview
Selectors for Redux.
Index
Variables
Functions
Interfaces
Type Aliases
- Combiner
- DefaultMemoizeFields
- DevModeCheckFrequency
- DevModeChecksExecutionInfo
- EqualityFn
- ExtractMemoizerFields
- GetParamsFromSelectors
- GetStateFromSelectors
- MemoizeOptionsFromParameters
- OutputSelector
- OutputSelectorFields
- OverrideMemoizeOptions
- RootStateSelectors
- Selector
- SelectorArray
- SelectorResultArray
- SelectorResultsMap
- SelectorsObject
- TypedStructuredSelectorCreator
- UnknownMemoizer
Variables
variable createSelector
const createSelector: CreateSelectorFunction< <Func extends AnyFunction>( func: Func, options?: WeakMapMemoizeOptions<ReturnType<Func>> ) => Func & { clearCache: () => void; resultsCount: () => number; resetResultsCount: () => void; }, <Func extends AnyFunction>( func: Func, options?: WeakMapMemoizeOptions<ReturnType<Func>> ) => Func & { clearCache: () => void; resultsCount: () => number; resetResultsCount: () => void; }, any>;
Accepts one or more "input selectors" (either as separate arguments or a single array), a single "result function" / "combiner", and an optional options object, and generates a memoized selector function.
See Also
Modifiers
@public
variable createStructuredSelector
const createStructuredSelector: StructuredSelectorCreator<any>;
A convenience function that simplifies returning an object made up of selector results.
Parameter inputSelectorsObject
A key value pair consisting of input selectors.
Parameter selectorCreator
A custom selector creator function. It defaults to
createSelector
.Returns
A memoized structured selector.
Example 1
Modern Use Case
import { createSelector, createStructuredSelector } from 'reselect'interface RootState {todos: {id: numbercompleted: booleantitle: stringdescription: string}[]alerts: { id: number; read: boolean }[]}// This:const structuredSelector = createStructuredSelector({todos: (state: RootState) => state.todos,alerts: (state: RootState) => state.alerts,todoById: (state: RootState, id: number) => state.todos[id]},createSelector)// Is essentially the same as this:const selector = createSelector([(state: RootState) => state.todos,(state: RootState) => state.alerts,(state: RootState, id: number) => state.todos[id]],(todos, alerts, todoById) => {return {todos,alerts,todoById}})See Also
Modifiers
@public
variable referenceEqualityCheck
const referenceEqualityCheck: EqualityFn<any>;
Runs a simple reference equality check. What uses by default.
**Note**: This function was previously known as
defaultEqualityCheck
.Modifiers
@public
Functions
function createSelectorCreator
createSelectorCreator: { < MemoizeFunction extends UnknownMemoizer<UnknownFunction>, ArgsMemoizeFunction extends UnknownMemoizer<UnknownFunction> = < Func extends AnyFunction >( func: Func, options?: WeakMapMemoizeOptions<ReturnType<Func>> ) => Func & { clearCache: () => void; resultsCount: () => number; resetResultsCount: () => void; } >( options: Simplify< SetRequired< CreateSelectorOptions< typeof weakMapMemoize, typeof weakMapMemoize, MemoizeFunction, ArgsMemoizeFunction >, 'memoize' > > ): CreateSelectorFunction<MemoizeFunction, ArgsMemoizeFunction>; <MemoizeFunction extends UnknownMemoizer<UnknownFunction>>( memoize: MemoizeFunction, ...memoizeOptionsFromArgs: DropFirstParameter<MemoizeFunction> ): CreateSelectorFunction< MemoizeFunction, <Func extends AnyFunction>( func: Func, options?: WeakMapMemoizeOptions<ReturnType<Func>> ) => Func & { clearCache: () => void; resultsCount: () => number; resetResultsCount: () => void; }, any >;};
Creates a selector creator function with the specified memoization function and options for customizing memoization behavior.
Parameter options
An options object containing the
memoize
function responsible for memoizing theresultFunc
insidecreateSelector
(e.g.,lruMemoize
orweakMapMemoize
). It also provides additional options for customizing memoization. While thememoize
property is mandatory, the rest are optional.Returns
A customized
createSelector
function.Example 1
const customCreateSelector = createSelectorCreator({memoize: customMemoize, // Function to be used to memoize `resultFunc`memoizeOptions: [memoizeOption1, memoizeOption2], // Options passed to `customMemoize` as the second argument onwardsargsMemoize: customArgsMemoize, // Function to be used to memoize the selector's argumentsargsMemoizeOptions: [argsMemoizeOption1, argsMemoizeOption2] // Options passed to `customArgsMemoize` as the second argument onwards})const customSelector = customCreateSelector([inputSelector1, inputSelector2],resultFunc // `resultFunc` will be passed as the first argument to `customMemoize`)customSelector(...selectorArgs // Will be memoized by `customArgsMemoize`)MemoizeFunction - The type of the memoize function that is used to memoize the
resultFunc
insidecreateSelector
(e.g.,lruMemoize
orweakMapMemoize
). ArgsMemoizeFunction - The type of the optional memoize function that is used to memoize the arguments passed into the output selector generated bycreateSelector
(e.g.,lruMemoize
orweakMapMemoize
). If none is explicitly provided,weakMapMemoize
will be used.See Also
5.0.0
Modifiers
@public
Creates a selector creator function with the specified memoization function and options for customizing memoization behavior.
Parameter memoize
The
memoize
function responsible for memoizing theresultFunc
insidecreateSelector
(e.g.,lruMemoize
orweakMapMemoize
).Parameter memoizeOptionsFromArgs
Optional configuration options for the memoization function. These options are then passed to the memoize function as the second argument onwards.
Returns
A customized
createSelector
function.Example 1
const customCreateSelector = createSelectorCreator(customMemoize, // Function to be used to memoize `resultFunc`option1, // Will be passed as second argument to `customMemoize`option2, // Will be passed as third argument to `customMemoize`option3 // Will be passed as fourth argument to `customMemoize`)const customSelector = customCreateSelector([inputSelector1, inputSelector2],resultFunc // `resultFunc` will be passed as the first argument to `customMemoize`)MemoizeFunction - The type of the memoize function that is used to memoize the
resultFunc
insidecreateSelector
(e.g.,lruMemoize
orweakMapMemoize
).See Also
Modifiers
@public
function lruMemoize
lruMemoize: <Func extends AnyFunction>( func: Func, equalityCheckOrOptions?: EqualityFn | LruMemoizeOptions<ReturnType<Func>>) => Func & { clearCache: () => void; resultsCount: () => number; resetResultsCount: () => void;};
Creates a memoized version of a function with an optional LRU (Least Recently Used) cache. The memoized function uses a cache to store computed values. Depending on the
maxSize
option, it will use either a singleton cache (for a single entry) or an LRU cache (for multiple entries).**Note**: This function was previously known as
defaultMemoize
.Parameter func
The function to be memoized.
Parameter equalityCheckOrOptions
Either an equality check function or an options object.
Returns
A memoized function with a
.clearCache()
method attached.Func - The type of the function that is memoized.
See Also
Modifiers
@public
function setGlobalDevModeChecks
setGlobalDevModeChecks: (devModeChecks: Partial<DevModeChecks>) => void;
Overrides the development mode checks settings for all selectors.
Reselect performs additional checks in development mode to help identify and warn about potential issues in selector behavior. This function allows you to customize the behavior of these checks across all selectors in your application.
**Note**: This setting can still be overridden per selector inside
createSelector
'soptions
object. See and for more details._The development mode checks do not run in production builds._
Parameter devModeChecks
An object specifying the desired settings for development mode checks. You can provide partial overrides. Unspecified settings will retain their current values.
Example 1
import { setGlobalDevModeChecks } from 'reselect'import { DevModeChecks } from '../types'// Run only the first time the selector is called. (default)setGlobalDevModeChecks({ inputStabilityCheck: 'once' })// Run every time the selector is called.setGlobalDevModeChecks({ inputStabilityCheck: 'always' })// Never run the input stability check.setGlobalDevModeChecks({ inputStabilityCheck: 'never' })// Run only the first time the selector is called. (default)setGlobalDevModeChecks({ identityFunctionCheck: 'once' })// Run every time the selector is called.setGlobalDevModeChecks({ identityFunctionCheck: 'always' })// Never run the identity function check.setGlobalDevModeChecks({ identityFunctionCheck: 'never' })See Also
5.0.0
Modifiers
@public
function unstable_autotrackMemoize
unstable_autotrackMemoize: <Func extends AnyFunction>( func: Func) => Func & { clearCache: () => void; resultsCount: () => number; resetResultsCount: () => void;};
Uses an "auto-tracking" approach inspired by the work of the Ember Glimmer team. It uses a Proxy to wrap arguments and track accesses to nested fields in your selector on first read. Later, when the selector is called with new arguments, it identifies which accessed fields have changed and only recalculates the result if one or more of those accessed fields have changed. This allows it to be more precise than the shallow equality checks in
lruMemoize
.__Design Tradeoffs for
autotrackMemoize
:__ - Pros: - It is likely to avoid excess calculations and recalculate fewer times thanlruMemoize
will, which may also result in fewer component re-renders. - Cons: - It only has a cache size of 1. - It is slower thanlruMemoize
, because it has to do more work. (How much slower is dependent on the number of accessed fields in a selector, number of calls, frequency of input changes, etc) - It can have some unexpected behavior. Because it tracks nested field accesses, cases where you don't access a field will not recalculate properly. For example, a badly-written selector like: ```ts createSelector([state => state.todos], todos => todos) ``` that just immediately returns the extracted value will never update, because it doesn't see any field accesses to check.__Use Cases for
autotrackMemoize
:__ - It is likely best used for cases where you need to access specific nested fields in data, and avoid recalculating if other fields in the same data objects are immutably updated.Parameter func
The function to be memoized.
Returns
A memoized function with a
.clearCache()
method attached.Example 1
Using
createSelector
import { unstable_autotrackMemoize as autotrackMemoize, createSelector } from 'reselect'const selectTodoIds = createSelector([(state: RootState) => state.todos],(todos) => todos.map(todo => todo.id),{ memoize: autotrackMemoize })Example 2
Using
createSelectorCreator
import { unstable_autotrackMemoize as autotrackMemoize, createSelectorCreator } from 'reselect'const createSelectorAutotrack = createSelectorCreator({ memoize: autotrackMemoize })const selectTodoIds = createSelectorAutotrack([(state: RootState) => state.todos],(todos) => todos.map(todo => todo.id))Func - The type of the function that is memoized.
See Also
5.0.0
Modifiers
@public
@experimental
function weakMapMemoize
weakMapMemoize: <Func extends AnyFunction>( func: Func, options?: WeakMapMemoizeOptions<ReturnType<Func>>) => Func & { clearCache: () => void; resultsCount: () => number; resetResultsCount: () => void;};
Creates a tree of
WeakMap
-based cache nodes based on the identity of the arguments it's been called with (in this case, the extracted values from your input selectors). This allowsweakMapMemoize
to have an effectively infinite cache size. Cache results will be kept in memory as long as references to the arguments still exist, and then cleared out as the arguments are garbage-collected.__Design Tradeoffs for
weakMapMemoize
:__ - Pros: - It has an effectively infinite cache size, but you have no control over how long values are kept in cache as it's based on garbage collection andWeakMap
s. - Cons: - There's currently no way to alter the argument comparisons. They're based on strict reference equality. - It's roughly the same speed aslruMemoize
, although likely a fraction slower.__Use Cases for
weakMapMemoize
:__ - This memoizer is likely best used for cases where you need to call the same selector instance with many different arguments, such as a single selector instance that is used in a list item component and called with item IDs like: ```ts useSelector(state => selectSomeData(state, props.category)) ```Parameter func
The function to be memoized.
Returns
A memoized function with a
.clearCache()
method attached.Example 1
Using
createSelector
import { createSelector, weakMapMemoize } from 'reselect'interface RootState {items: { id: number; category: string; name: string }[]}const selectItemsByCategory = createSelector([(state: RootState) => state.items,(state: RootState, category: string) => category],(items, category) => items.filter(item => item.category === category),{memoize: weakMapMemoize,argsMemoize: weakMapMemoize})Example 2
Using
createSelectorCreator
import { createSelectorCreator, weakMapMemoize } from 'reselect'const createSelectorWeakMap = createSelectorCreator({ memoize: weakMapMemoize, argsMemoize: weakMapMemoize })const selectItemsByCategory = createSelectorWeakMap([(state: RootState) => state.items,(state: RootState, category: string) => category],(items, category) => items.filter(item => item.category === category))Func - The type of the function that is memoized.
See Also
5.0.0
Modifiers
@public
@experimental
Interfaces
interface CreateSelectorFunction
interface CreateSelectorFunction< MemoizeFunction extends UnknownMemoizer = typeof weakMapMemoize, ArgsMemoizeFunction extends UnknownMemoizer = typeof weakMapMemoize, StateType = any> {}
An instance of
createSelector
, customized with a given memoize implementation.MemoizeFunction - The type of the memoize function that is used to memoize the
resultFunc
insidecreateSelector
(e.g.,lruMemoize
orweakMapMemoize
). ArgsMemoizeFunction - The type of the optional memoize function that is used to memoize the arguments passed into the output selector generated bycreateSelector
(e.g.,lruMemoize
orweakMapMemoize
). If none is explicitly provided,weakMapMemoize
will be used. StateType - The type of state that the selectors created with this selector creator will operate on.Modifiers
@public
property withTypes
withTypes: <OverrideStateType extends StateType>() => CreateSelectorFunction< MemoizeFunction, ArgsMemoizeFunction, OverrideStateType>;
Creates a "pre-typed" version of where the
state
type is predefined.This allows you to set the
state
type once, eliminating the need to specify it with every call.Returns
A pre-typed
createSelector
with the state type already defined.Example 1
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 typestate => state.todos],todos => todos.map(({ id }) => id))OverrideStateType - The specific type of state used by all selectors created with this selector creator.
See Also
5.1.0
call signature
<InputSelectors extends SelectorArray<StateType>, Result>( ...createSelectorArgs: [ ...inputSelectors: InputSelectors, combiner: Combiner<InputSelectors, Result> ]): OutputSelector<InputSelectors, Result, MemoizeFunction, ArgsMemoizeFunction> & InterruptRecursion;
Creates a memoized selector function.
Parameter createSelectorArgs
An arbitrary number of input selectors as separate inline arguments and a
combiner
function.Returns
A memoized output selector.
InputSelectors - The type of the input selectors as an array. Result - The return type of the
combiner
as well as the output selector. OverrideMemoizeFunction - The type of the optionalmemoize
function that could be passed into the options object to override the originalmemoize
function that was initially passed intocreateSelectorCreator
. OverrideArgsMemoizeFunction - The type of the optionalargsMemoize
function that could be passed into the options object to override the originalargsMemoize
function that was initially passed intocreateSelectorCreator
.See Also
call signature
< InputSelectors extends SelectorArray<StateType>, Result, OverrideMemoizeFunction extends UnknownMemoizer = MemoizeFunction, OverrideArgsMemoizeFunction extends UnknownMemoizer = ArgsMemoizeFunction>( ...createSelectorArgs: [ ...inputSelectors: InputSelectors, combiner: Combiner<InputSelectors, Result>, createSelectorOptions: Simplify< CreateSelectorOptions< MemoizeFunction, ArgsMemoizeFunction, OverrideMemoizeFunction, OverrideArgsMemoizeFunction > > ]): OutputSelector< InputSelectors, Result, OverrideMemoizeFunction, OverrideArgsMemoizeFunction> & InterruptRecursion;
Creates a memoized selector function.
Parameter createSelectorArgs
An arbitrary number of input selectors as separate inline arguments, a
combiner
function and anoptions
object.Returns
A memoized output selector.
InputSelectors - The type of the input selectors as an array. Result - The return type of the
combiner
as well as the output selector. OverrideMemoizeFunction - The type of the optionalmemoize
function that could be passed into the options object to override the originalmemoize
function that was initially passed intocreateSelectorCreator
. OverrideArgsMemoizeFunction - The type of the optionalargsMemoize
function that could be passed into the options object to override the originalargsMemoize
function that was initially passed intocreateSelectorCreator
.See Also
call signature
< InputSelectors extends SelectorArray<StateType>, Result, OverrideMemoizeFunction extends UnknownMemoizer = MemoizeFunction, OverrideArgsMemoizeFunction extends UnknownMemoizer = ArgsMemoizeFunction>( inputSelectors: [...InputSelectors], combiner: Combiner<InputSelectors, Result>, createSelectorOptions?: Simplify< CreateSelectorOptions< MemoizeFunction, ArgsMemoizeFunction, OverrideMemoizeFunction, OverrideArgsMemoizeFunction > >): OutputSelector< InputSelectors, Result, OverrideMemoizeFunction, OverrideArgsMemoizeFunction> & InterruptRecursion;
Creates a memoized selector function.
Parameter inputSelectors
An array of input selectors.
Parameter combiner
A function that Combines the input selectors and returns an output selector. Otherwise known as the result function.
Parameter createSelectorOptions
An optional options object that allows for further customization per selector.
Returns
A memoized output selector.
InputSelectors - The type of the input selectors array. Result - The return type of the
combiner
as well as the output selector. OverrideMemoizeFunction - The type of the optionalmemoize
function that could be passed into the options object to override the originalmemoize
function that was initially passed intocreateSelectorCreator
. OverrideArgsMemoizeFunction - The type of the optionalargsMemoize
function that could be passed into the options object to override the originalargsMemoize
function that was initially passed intocreateSelectorCreator
.See Also
interface CreateSelectorOptions
interface CreateSelectorOptions< MemoizeFunction extends UnknownMemoizer = typeof weakMapMemoize, ArgsMemoizeFunction extends UnknownMemoizer = typeof weakMapMemoize, OverrideMemoizeFunction extends UnknownMemoizer = never, OverrideArgsMemoizeFunction extends UnknownMemoizer = never> {}
The options object used inside
createSelector
andcreateSelectorCreator
.MemoizeFunction - The type of the memoize function that is used to memoize the
resultFunc
insidecreateSelector
(e.g.,lruMemoize
orweakMapMemoize
). ArgsMemoizeFunction - The type of the optional memoize function that is used to memoize the arguments passed into the output selector generated bycreateSelector
(e.g.,lruMemoize
orweakMapMemoize
). If none is explicitly provided,weakMapMemoize
will be used. OverrideMemoizeFunction - The type of the optionalmemoize
function that could be passed into the options object insidecreateSelector
to override the originalmemoize
function that was initially passed intocreateSelectorCreator
. OverrideArgsMemoizeFunction - The type of the optionalargsMemoize
function that could be passed into the options object insidecreateSelector
to override the originalargsMemoize
function that was initially passed intocreateSelectorCreator
. If none was initially provided,weakMapMemoize
will be used.Modifiers
@public
property argsMemoize
argsMemoize?: FallbackIfNever<OverrideArgsMemoizeFunction, ArgsMemoizeFunction>;
The optional memoize function that is used to memoize the arguments passed into the output selector generated by
createSelector
(e.g.,lruMemoize
orweakMapMemoize
).When passed directly into
createSelector
, it overrides theargsMemoize
function initially passed intocreateSelectorCreator
. If none was initially provided,weakMapMemoize
will be used.Example 1
import { createSelector, weakMapMemoize } from 'reselect'const selectItemsByCategory = createSelector([(state: RootState) => state.items,(state: RootState, category: string) => category],(items, category) => items.filter(item => item.category === category),{ argsMemoize: weakMapMemoize })weakMapMemoize
5.0.0
property argsMemoizeOptions
argsMemoizeOptions?: OverrideMemoizeOptions< ArgsMemoizeFunction, OverrideArgsMemoizeFunction>;
Optional configuration options for the function. These options are passed to the function as the second argument.
5.0.0
property devModeChecks
devModeChecks?: Partial<DevModeChecks>;
Reselect performs additional checks in development mode to help identify and warn about potential issues in selector behavior. This option allows you to customize the behavior of these checks per selector.
See Also
5.0.0
property memoize
memoize?: FallbackIfNever<OverrideMemoizeFunction, MemoizeFunction>;
The memoize function that is used to memoize the inside
createSelector
(e.g.,lruMemoize
orweakMapMemoize
).When passed directly into
createSelector
, it overrides thememoize
function initially passed intocreateSelectorCreator
.Example 1
import { createSelector, weakMapMemoize } from 'reselect'const selectItemsByCategory = createSelector([(state: RootState) => state.items,(state: RootState, category: string) => category],(items, category) => items.filter(item => item.category === category),{ memoize: weakMapMemoize })5.0.0
property memoizeOptions
memoizeOptions?: OverrideMemoizeOptions< MemoizeFunction, OverrideMemoizeFunction>;
Optional configuration options for the function. These options are passed to the function as the second argument.
5.0.0
interface DevModeChecks
interface DevModeChecks {}
Represents the configuration for development mode checks.
5.0.0
Modifiers
@public
property identityFunctionCheck
identityFunctionCheck: DevModeCheckFrequency;
Overrides the global identity function check for the selector. -
once
- Run only the first time the selector is called. -always
- Run every time the selector is called. -never
- Never run the identity function check.'once'
See Also
5.0.0
property inputStabilityCheck
inputStabilityCheck: DevModeCheckFrequency;
Overrides the global input stability check for the selector. -
once
- Run only the first time the selector is called. -always
- Run every time the selector is called. -never
- Never run the input stability check.'once'
See Also
5.0.0
interface LruMemoizeOptions
interface LruMemoizeOptions<Result = any> {}
Options for configuring the behavior of a function memoized with LRU (Least Recently Used) caching.
Result - The type of the return value of the memoized function.
Modifiers
@public
property equalityCheck
equalityCheck?: EqualityFn;
Function used to compare the individual arguments of the provided calculation function.
referenceEqualityCheck
property maxSize
maxSize?: number;
The maximum size of the cache used by the selector. A size greater than 1 means the selector will use an LRU (Least Recently Used) cache, allowing for the caching of multiple results based on different sets of arguments.
1
property resultEqualityCheck
resultEqualityCheck?: EqualityFn<Result>;
If provided, used to compare a newly generated output value against previous values in the cache. If a match is found, the old value is returned. This addresses the common
todos.map(todo => todo.id)use case, where an update to another field in the original data causes a recalculation due to changed references, but the output is still effectively the same.
4.1.0
interface StructuredSelectorCreator
interface StructuredSelectorCreator<StateType = any> {}
It provides a way to create structured selectors. The structured selector can take multiple input selectors and map their output to an object with specific keys.
StateType - The type of state that the structured selectors created with this structured selector creator will operate on.
See Also
Modifiers
@public
property withTypes
withTypes: < OverrideStateType extends StateType>() => StructuredSelectorCreator<OverrideStateType>;
Creates a "pre-typed" version of where the
state
type is predefined.This allows you to set the
state
type once, eliminating the need to specify it with every call.Returns
A pre-typed
createStructuredSelector
with the state type already defined.Example 1
import { createStructuredSelector } from 'reselect'export interface RootState {todos: { id: number; completed: boolean }[]alerts: { id: number; read: boolean }[]}export const createStructuredAppSelector =createStructuredSelector.withTypes<RootState>()const structuredAppSelector = createStructuredAppSelector({// Type of `state` is set to `RootState`, no need to manually set the typetodos: state => state.todos,alerts: state => state.alerts,todoById: (state, id: number) => state.todos[id]})OverrideStateType - The specific type of state used by all structured selectors created with this structured selector creator.
See Also
5.1.0
call signature
< InputSelectorsObject extends SelectorsObject<StateType>, MemoizeFunction extends UnknownMemoizer = typeof weakMapMemoize, ArgsMemoizeFunction extends UnknownMemoizer = typeof weakMapMemoize>( inputSelectorsObject: InputSelectorsObject, selectorCreator?: CreateSelectorFunction< MemoizeFunction, ArgsMemoizeFunction >): OutputSelector< ObjectValuesToTuple<InputSelectorsObject>, Simplify<SelectorResultsMap<InputSelectorsObject>>, MemoizeFunction, ArgsMemoizeFunction> & InterruptRecursion;
A convenience function that simplifies returning an object made up of selector results.
Parameter inputSelectorsObject
A key value pair consisting of input selectors.
Parameter selectorCreator
A custom selector creator function. It defaults to
createSelector
.Returns
A memoized structured selector.
Example 1
Modern Use Case
import { createSelector, createStructuredSelector } from 'reselect'interface RootState {todos: {id: numbercompleted: booleantitle: stringdescription: string}[]alerts: { id: number; read: boolean }[]}// This:const structuredSelector = createStructuredSelector({todos: (state: RootState) => state.todos,alerts: (state: RootState) => state.alerts,todoById: (state: RootState, id: number) => state.todos[id]},createSelector)// Is essentially the same as this:const selector = createSelector([(state: RootState) => state.todos,(state: RootState) => state.alerts,(state: RootState, id: number) => state.todos[id]],(todos, alerts, todoById) => {return {todos,alerts,todoById}})Example 2
In your component:
import type { RootState } from 'createStructuredSelector/modernUseCase'import { structuredSelector } from 'createStructuredSelector/modernUseCase'import type { FC } from 'react'import { useSelector } from 'react-redux'interface Props {id: number}const MyComponent: FC<Props> = ({ id }) => {const { todos, alerts, todoById } = useSelector((state: RootState) =>structuredSelector(state, id))return (<div>Next to do is:<h2>{todoById.title}</h2><p>Description: {todoById.description}</p><ul><h3>All other to dos:</h3>{todos.map(todo => (<li key={todo.id}>{todo.title}</li>))}</ul></div>)}Example 3
Simple Use Case
const selectA = state => state.aconst selectB = state => state.b// The result function in the following selector// is simply building an object from the input selectorsconst structuredSelector = createSelector(selectA, selectB, (a, b) => ({a,b}))const result = structuredSelector({ a: 1, b: 2 }) // will produce { x: 1, y: 2 }InputSelectorsObject - The shape of the input selectors object. MemoizeFunction - The type of the memoize function that is used to create the structured selector. It defaults to
weakMapMemoize
. ArgsMemoizeFunction - The type of the of the memoize function that is used to memoize the arguments passed into the generated structured selector. It defaults toweakMapMemoize
.See Also
interface WeakMapMemoizeOptions
interface WeakMapMemoizeOptions<Result = any> {}
Configuration options for a memoization function utilizing
WeakMap
for its caching mechanism.Result - The type of the return value of the memoized function.
5.0.0
Modifiers
@public
property resultEqualityCheck
resultEqualityCheck?: EqualityFn<Result>;
If provided, used to compare a newly generated output value against previous values in the cache. If a match is found, the old value is returned. This addresses the common
todos.map(todo => todo.id)use case, where an update to another field in the original data causes a recalculation due to changed references, but the output is still effectively the same.
5.0.0
Type Aliases
type Combiner
type Combiner<InputSelectors extends SelectorArray, Result> = Distribute< /** * A function that takes input selectors' return values as arguments and returns a result. Otherwise known as `resultFunc`. * * @param resultFuncArgs - Return values of input selectors. * @returns The return value of {@linkcode OutputSelectorFields.resultFunc resultFunc}. */ (...resultFuncArgs: SelectorResultArray<InputSelectors>) => Result>;
A function that takes input selectors' return values as arguments and returns a result. Otherwise known as
resultFunc
.InputSelectors - An array of input selectors. Result - Result returned by
resultFunc
.Modifiers
@public
type DefaultMemoizeFields
type DefaultMemoizeFields = { /** * Clears the memoization cache associated with a memoized function. * This method is typically used to reset the state of the cache, allowing * for the garbage collection of previously memoized results and ensuring * that future calls to the function recompute the results. */ clearCache: () => void; resultsCount: () => number; resetResultsCount: () => void;};
Represents the additional properties attached to a function memoized by
reselect
.lruMemoize
,weakMapMemoize
andautotrackMemoize
all return these properties.See Also
Modifiers
@public
type DevModeCheckFrequency
type DevModeCheckFrequency = 'always' | 'once' | 'never';
The frequency of development mode checks.
5.0.0
Modifiers
@public
type DevModeChecksExecutionInfo
type DevModeChecksExecutionInfo = { [K in keyof DevModeChecks]: { /** * A boolean indicating whether the check should be executed. */ shouldRun: boolean; /** * The function to execute for the check. */ run: AnyFunction; };};
Represents execution information for development mode checks.
5.0.0
Modifiers
@public
type EqualityFn
type EqualityFn<T = any> = (a: T, b: T) => boolean;
A standard function returning true if two values are considered equal.
Modifiers
@public
type ExtractMemoizerFields
type ExtractMemoizerFields<MemoizeFunction extends UnknownMemoizer> = Simplify< OmitIndexSignature<ReturnType<MemoizeFunction>>>;
Extracts the additional properties or methods that a memoize function attaches to the function it memoizes (e.g.,
clearCache
).MemoizeFunction - The type of the memoize function to be checked.
Modifiers
@public
type GetParamsFromSelectors
type GetParamsFromSelectors<Selectors extends SelectorArray> = ArrayTail< MergeParameters<Selectors>>;
Determines the combined "Params" type (all remaining args) from all input selectors.
Modifiers
@public
type GetStateFromSelectors
type GetStateFromSelectors<Selectors extends SelectorArray> = MergeParameters<Selectors>[0];
Determines the combined single "State" type (first arg) from all input selectors.
Modifiers
@public
type MemoizeOptionsFromParameters
type MemoizeOptionsFromParameters<MemoizeFunction extends UnknownMemoizer> = | ( | NonFunctionType<DropFirstParameter<MemoizeFunction>[0]> | FunctionType<DropFirstParameter<MemoizeFunction>[0]> ) | ( | NonFunctionType<DropFirstParameter<MemoizeFunction>[number]> | FunctionType<DropFirstParameter<MemoizeFunction>[number]> )[];
Extracts the options type for a memoization function based on its parameters. The first parameter of the function is expected to be the function to be memoized, followed by options for the memoization process.
MemoizeFunction - The type of the memoize function to be checked.
Modifiers
@public
type OutputSelector
type OutputSelector< InputSelectors extends SelectorArray = SelectorArray, Result = unknown, MemoizeFunction extends UnknownMemoizer = typeof weakMapMemoize, ArgsMemoizeFunction extends UnknownMemoizer = typeof weakMapMemoize> = Selector< GetStateFromSelectors<InputSelectors>, Result, GetParamsFromSelectors<InputSelectors>> & ExtractMemoizerFields<ArgsMemoizeFunction> & OutputSelectorFields< InputSelectors, Result, MemoizeFunction, ArgsMemoizeFunction >;
Represents the actual selectors generated by
createSelector
.InputSelectors - The type of the input selectors. Result - The type of the result returned by the
resultFunc
. MemoizeFunction - The type of the memoize function that is used to memoize theresultFunc
insidecreateSelector
(e.g.,lruMemoize
orweakMapMemoize
). ArgsMemoizeFunction - The type of the optional memoize function that is used to memoize the arguments passed into the output selector generated bycreateSelector
(e.g.,lruMemoize
orweakMapMemoize
). If none is explicitly provided,weakMapMemoize
will be used.Modifiers
@public
type OutputSelectorFields
type OutputSelectorFields< InputSelectors extends SelectorArray = SelectorArray, Result = unknown, MemoizeFunction extends UnknownMemoizer = typeof weakMapMemoize, ArgsMemoizeFunction extends UnknownMemoizer = typeof weakMapMemoize> = { /** * The final function passed to `createSelector`. Otherwise known as the `combiner`. */ resultFunc: Combiner<InputSelectors, Result>; /** * The memoized version of {@linkcode OutputSelectorFields.resultFunc resultFunc}. */ memoizedResultFunc: Combiner<InputSelectors, Result> & ExtractMemoizerFields<MemoizeFunction>; /** * @Returns The last result calculated by {@linkcode OutputSelectorFields.memoizedResultFunc memoizedResultFunc}. */ lastResult: () => Result; /** * The array of the input selectors used by `createSelector` to compose the * combiner ({@linkcode OutputSelectorFields.memoizedResultFunc memoizedResultFunc}). */ dependencies: InputSelectors; /** * Counts the number of times {@linkcode OutputSelectorFields.memoizedResultFunc memoizedResultFunc} has been recalculated. */ recomputations: () => number; /** * Resets the count of {@linkcode OutputSelectorFields.recomputations recomputations} count to 0. */ resetRecomputations: () => void; /** * Counts the number of times the input selectors ({@linkcode OutputSelectorFields.dependencies dependencies}) * have been recalculated. This is distinct from {@linkcode OutputSelectorFields.recomputations recomputations}, * which tracks the recalculations of the result function. * * @since 5.0.0 */ dependencyRecomputations: () => number; /** * Resets the count {@linkcode OutputSelectorFields.dependencyRecomputations dependencyRecomputations} * for the input selectors ({@linkcode OutputSelectorFields.dependencies dependencies}) * of a memoized selector. * * @since 5.0.0 */ resetDependencyRecomputations: () => void;} & Simplify< Required< Pick< CreateSelectorOptions<MemoizeFunction, ArgsMemoizeFunction>, 'argsMemoize' | 'memoize' > >>;
The additional fields attached to the output selector generated by
createSelector
.**Note**: Although and are included in the attached fields, the fields themselves are independent of the type of and functions. Meaning this type is not going to generate additional fields based on what functions we use to memoize our selectors.
_This type is not to be confused with ._
InputSelectors - The type of the input selectors. Result - The type of the result returned by the
resultFunc
. MemoizeFunction - The type of the memoize function that is used to memoize theresultFunc
insidecreateSelector
(e.g.,lruMemoize
orweakMapMemoize
). ArgsMemoizeFunction - The type of the optional memoize function that is used to memoize the arguments passed into the output selector generated bycreateSelector
(e.g.,lruMemoize
orweakMapMemoize
). If none is explicitly provided,weakMapMemoize
will be used.Modifiers
@public
type OverrideMemoizeOptions
type OverrideMemoizeOptions< MemoizeFunction extends UnknownMemoizer, OverrideMemoizeFunction extends UnknownMemoizer = never> = IfNever< OverrideMemoizeFunction, Simplify<MemoizeOptionsFromParameters<MemoizeFunction>>, Simplify<MemoizeOptionsFromParameters<OverrideMemoizeFunction>>>;
Derive the type of memoize options object based on whether the memoize function itself was overridden.
_This type can be used for both
memoizeOptions
andargsMemoizeOptions
._MemoizeFunction - The type of the
memoize
orargsMemoize
function initially passed intocreateSelectorCreator
. OverrideMemoizeFunction - The type of the optionalmemoize
orargsMemoize
function passed directly intocreateSelector
which then overrides the originalmemoize
orargsMemoize
function passed intocreateSelectorCreator
.Modifiers
@public
type RootStateSelectors
type RootStateSelectors<RootState = any> = { [Key in keyof RootState]: Selector<RootState, RootState[Key], []>;};
Represents a mapping of selectors for each key in a given root state.
This type is a utility that takes a root state object type and generates a corresponding set of selectors. Each selector is associated with a key in the root state, allowing for the selection of specific parts of the state.
RootState - The type of the root state object.
5.0.0
Modifiers
@public
type Selector
type Selector< State = any, Result = unknown, Params extends readonly any[] = any[]> = Distribute< /** * A function that takes a state and returns data that is based on that state. * * @param state - The first argument, often a Redux root state object. * @param params - All additional arguments passed into the selector. * @returns A derived value from the state. */ (state: State, ...params: FallbackIfNever<Params, []>) => Result>;
A standard selector function. State - The first value, often a Redux root state object. Result - The final result returned by the selector. Params - All additional arguments passed into the selector.
Modifiers
@public
type SelectorArray
type SelectorArray<State = any> = readonly Selector<State>[];
An array of input selectors.
Modifiers
@public
type SelectorResultArray
type SelectorResultArray<Selectors extends SelectorArray> = ExtractReturnType<Selectors>;
Extracts an array of all return types from all input selectors.
Modifiers
@public
type SelectorResultsMap
type SelectorResultsMap<TObject extends SelectorsObject> = { [Key in keyof TObject]: ReturnType<TObject[Key]>;};
Represents a mapping of selectors to their return types.
TObject - An object type where each property is a selector function.
Modifiers
@public
type SelectorsObject
type SelectorsObject<StateType = any> = Record<string, Selector<StateType>>;
Represents an object where each property is a selector function.
StateType - The type of state that all the selectors operate on.
Modifiers
@public
type TypedStructuredSelectorCreator
type TypedStructuredSelectorCreator<RootState = any> = /** * A convenience function that simplifies returning an object * made up of selector results. * * @param inputSelectorsObject - A key value pair consisting of input selectors. * @param selectorCreator - A custom selector creator function. It defaults to `createSelector`. * @returns A memoized structured selector. * * @example * <caption>Modern Use Case</caption> * ```ts * import { createSelector, createStructuredSelector } from 'reselect' * * interface RootState { * todos: { * id: number * completed: boolean * title: string * description: string * }[] * alerts: { id: number; read: boolean }[] * } * * // This: * const structuredSelector = createStructuredSelector( * { * todos: (state: RootState) => state.todos, * alerts: (state: RootState) => state.alerts, * todoById: (state: RootState, id: number) => state.todos[id] * }, * createSelector * ) * * // Is essentially the same as this: * const selector = createSelector( * [ * (state: RootState) => state.todos, * (state: RootState) => state.alerts, * (state: RootState, id: number) => state.todos[id] * ], * (todos, alerts, todoById) => { * return { * todos, * alerts, * todoById * } * } * ) * ``` * * @example * <caption>In your component:</caption> * ```tsx * import type { RootState } from 'createStructuredSelector/modernUseCase' * import { structuredSelector } from 'createStructuredSelector/modernUseCase' * import type { FC } from 'react' * import { useSelector } from 'react-redux' * * interface Props { * id: number * } * * const MyComponent: FC<Props> = ({ id }) => { * const { todos, alerts, todoById } = useSelector((state: RootState) => * structuredSelector(state, id) * ) * * return ( * <div> * Next to do is: * <h2>{todoById.title}</h2> * <p>Description: {todoById.description}</p> * <ul> * <h3>All other to dos:</h3> * {todos.map(todo => ( * <li key={todo.id}>{todo.title}</li> * ))} * </ul> * </div> * ) * } * ``` * * @example * <caption>Simple Use Case</caption> * ```ts * const selectA = state => state.a * const selectB = state => state.b * * // The result function in the following selector * // is simply building an object from the input selectors * const structuredSelector = createSelector(selectA, selectB, (a, b) => ({ * a, * b * })) * * const result = structuredSelector({ a: 1, b: 2 }) // will produce { x: 1, y: 2 } * ``` * * @template InputSelectorsObject - The shape of the input selectors object. * @template MemoizeFunction - The type of the memoize function that is used to create the structured selector. It defaults to `weakMapMemoize`. * @template ArgsMemoizeFunction - The type of the of the memoize function that is used to memoize the arguments passed into the generated structured selector. It defaults to `weakMapMemoize`. * * @see {@link https://reselect.js.org/api/createStructuredSelector `createStructuredSelector`} */ < InputSelectorsObject extends RootStateSelectors<RootState> = RootStateSelectors<RootState>, MemoizeFunction extends UnknownMemoizer = typeof weakMapMemoize, ArgsMemoizeFunction extends UnknownMemoizer = typeof weakMapMemoize >( inputSelectorsObject: InputSelectorsObject, selectorCreator?: CreateSelectorFunction< MemoizeFunction, ArgsMemoizeFunction > ) => OutputSelector< ObjectValuesToTuple<InputSelectorsObject>, Simplify<SelectorResultsMap<InputSelectorsObject>>, MemoizeFunction, ArgsMemoizeFunction > & InterruptRecursion;
Modifiers
@public
Deprecated
Please use instead. This type will be removed in the future. RootState - The type of the root state object.
5.0.0
type UnknownMemoizer
type UnknownMemoizer<FunctionType extends UnknownFunction = UnknownFunction> = ( func: FunctionType, ...options: any[]) => FunctionType;
Any Memoizer function. A memoizer is a function that accepts another function and returns it.
FunctionType - The type of the function that is memoized.
Modifiers
@public
Package Files (1)
Dependencies (0)
No dependencies.
Dev Dependencies (28)
- @reduxjs/toolkit
- @testing-library/react
- @types/lodash
- @types/react
- @types/react-dom
- @types/shelljs
- @typescript-eslint/eslint-plugin
- @typescript-eslint/eslint-plugin-tslint
- @typescript-eslint/parser
- @typescript/analyze-trace
- eslint
- eslint-plugin-react
- eslint-plugin-typescript
- jsdom
- lodash
- lodash.memoize
- memoize-one
- micro-memoize
- netlify-plugin-cache
- prettier
- react
- react-dom
- react-redux
- rimraf
- shelljs
- tsup
- typescript
- vitest
Peer Dependencies (0)
No peer dependencies.
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/reselect
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/reselect)
- HTML<a href="https://www.jsdocs.io/package/reselect"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 3019 ms. - Missing or incorrect documentation? Open an issue for this package.