Repository files navigation

Fromv5,reselect provides the ability to natively implement custom memoization/caching solutions viacreateSelector options. Most of the featuresre-reselect used to enable should be now natively available inreselect.re-reselect will try to supportreselect v5+ for backward compatibility reasons.

re-reselect is a lightweight wrapper aroundReselect meant to enhance selectors withdeeper memoization andcache management.

Switching between different arguments using standardreselect selectors causescache invalidation since defaultreselect cache has alimit of one.

re-reselectforwards different calls to differentreselectselectors stored in cache, so that computed/memoized values are retained.

re-reselectselectors work as normalreselectselectors but they are able to determine whencreating a new selector or querying a cached one on the fly, depending on the supplied arguments.

Useful to:

• Retain selector's cache when sequentiallycalled with one/few different arguments (example)
• Join similar selectors into one
• Share selectors with props across multiple component instances (seereselect example andre-reselect solution)
• Instantiate selectorson runtime
• Enhancereselect withcustom caching strategies

import{createCachedSelector}from're-reselect';// Normal reselect routine: declare "inputSelectors" and "resultFunc"constgetUsers=state=>state.users;constgetLibraryId=(state,libraryName)=>state.libraries[libraryName].id;constgetUsersByLibrary=createCachedSelector(// inputSelectorsgetUsers,getLibraryId,// resultFunc(users,libraryId)=>expensiveComputation(users,libraryId),)(// re-reselect keySelector (receives selectors' arguments)// Use "libraryName" as cacheKey(_state_,libraryName)=>libraryName);// Cached selectors behave like normal selectors:// 2 reselect selectors are created, called and cachedconstreactUsers=getUsersByLibrary(state,'react');constvueUsers=getUsersByLibrary(state,'vue');// This 3rd call hits the cacheconstreactUsersAgain=getUsersByLibrary(state,'react');// reactUsers === reactUsersAgain// "expensiveComputation" called twice in total

• Installation
• Why? + example
  • re-reselect solution
  • Other viable solutions
• Examples
• FAQ
• API
  • createCachedSelector
  • createStructuredCachedSelector
  • keySelector
  • options
  • selector instance
• About re-reselect
• Todo's
• Contributors

npm install reselectnpm install re-reselect

Let's saygetData is areselect selector.

getData(state,itemId,'dataA');getData(state,itemId,'dataB');getData(state,itemId,'dataA');

The3rd argument invalidatesreselect cache on each call, forcinggetData to re-evaluate and return a new value.

re-reselect selectors keep acache ofreselect selectors stored bycacheKey.

cacheKey is the return value of thekeySelector function. It's by default astring ornumber but it can be anything depending on the chosen cache strategy (seecache objects docs).

keySelector is a custom function which:

• takes the same arguments as the selector itself (in the example:state,itemId,dataType)
• returns acacheKey

Aunique persistingreselect selector instance stored in cache is used to compute data for a givencacheKey (1:1).

Back to the example, we might setupre-reselect to retrieve data byquerying one of the cached selectors using the 3rd argument ascacheKey, allowing cache invalidation only whenstate oritemId change (but notdataType):

constgetData=createCachedSelector(state=>state,(state,itemId)=>itemId,(state,itemId,dataType)=>dataType,(state,itemId,dataType)=>expensiveComputation(state,itemId,dataType))((state,itemId,dataType)=>dataType// Use dataType as cacheKey);

Replacing a selector with a cached selector is invisible to the consuming application since the API is the same.

When a cached selector is called, the following happens behind the scenes:

1. Evaluate thecacheKey for the current call by executingkeySelector
2. Retrieve from cache thereselect selector stored under the givencacheKey
3. Return found selector or create a new one if no selector was found
4. Call returned selector with provided arguments

Easy, but doesn't scale. See"join similar selectors" example.

The solution suggested inReselect docs is fine, but it has a few downsides:

• Bloats your code by exposing bothget selectors andmakeGet selector factories
• Needs to import/call the selector factory instead of directly using the selector
• Two different instances, given the same arguments, will individually store and recompute the same result (readthis)

This is whatre-reselect actually does. 😀

• Join similar selectors
• Avoid selector factories
• Cache API calls
• Programmatic keySelector composition
• Usage with Selectorator

import{createSelector}from'reselect';exportconstgetMyData=createSelector(selectorA,selectorB,selectorC,(A,B,C)=>doSomethingWith(A,B,C),);

import{createCachedSelector}from're-reselect';exportconstgetMyData=createCachedSelector(selectorA,selectorB,selectorC,(A,B,C)=>doSomethingWith(A,B,C),)((state,arg1,arg2)=>arg2,// Use arg2 as cacheKey);

constmyData=getMyData(state,'foo','bar');

// Basic usage: use a single argument as cacheKeycreateCachedSelector(// ...)((state,arg1,arg2,arg3)=>arg3)// Use multiple arguments and chain them into a stringcreateCachedSelector(// ...)((state,arg1,arg2,arg3)=>`${arg1}:${arg3}`)// Extract properties from an objectcreateCachedSelector(// ...)((state,props)=>`${props.a}:${props.b}`)

import{createCachedSelector}from're-reselect';exportconstgetMyData=createCachedSelector(selectorA,selectorB,(A,B)=>doSomethingWith(A,B))((state,arg1)=>arg1// cacheKey);// Call your selectorconstmyFooData=getMyData(state,'foo');constmyBarData=getMyData(state,'bar');// Call getMatchingSelector method to retrieve underlying reselect selectors// which generated "myFooData" and "myBarData" resultsconstmyFooDataSelector=getMyData.getMatchingSelector(state,'foo');constmyBarDataSelector=getMyData.getMatchingSelector(state,'bar');// Call reselect's selectors methodsmyFooDataSelector.recomputations();myFooDataSelector.resetRecomputations();

import{createCachedSelector}from're-reselect';createCachedSelector(// ...reselect's `createSelector` arguments)(keySelector|{ options})

Takes the same arguments as reselect'screateSelector and returns a new function which accepts akeySelector or anoptions object.

Returns aselector instance.

import{createStructuredCachedSelector}from're-reselect';createStructuredCachedSelector(// ...reselect's `createStructuredSelector` arguments)(keySelector|{ options})

Takes the same arguments as reselect'screateStructuredSelector and returns a new function which accepts akeySelector or anoptions object.

Returns aselector instance.

A custom function receiving the same arguments as your selectors (andinputSelectors) andreturning acacheKey.

cacheKey isby default astring ornumber but can be anything depending on the chosen cache strategy (seecacheObject option).

ThekeySelector idea comes fromLodash's .memoize resolver.

Type:function
Default:undefined

ThekeySelector used by the cached selector.

Type:object
Default:FlatObjectCache

An optional customcache strategy object to handle the caching behaviour. Read more aboutre-reselect's custom cache here.

Type:function
Default:undefined

An optional function with the following signature returning thekeySelector used by the cached selector.

typekeySelectorCreator=(selectorInputs:{inputSelectors:InputSelector[];resultFunc:ResultFunc;keySelector:KeySelector;})=>KeySelector;

This allows the ability to dynamicallygeneratekeySelectors on runtime based on providedinputSelectors/resultFunc supportingkey selectors composition. It overrides any providedkeySelector.

Seeprogrammatic keySelector composition example.

Type:function
Default:reselect'screateSelector

An optional function describing acustom version of createSelector.

createCachedSelector andcreateStructuredCachedSelector return aselector instance which extends the API of astandard reselect selector.

The followings are advanced methods and you won't need them for basic usage!

Retrieve the selector responding to the given arguments.

Remove from the cache the selector responding to the given arguments.

Get the cacheObject instance being used by the selector (for advanced caching operations likethis).

Clear wholeselector cache.

Get an array containing the providedinputSelectors. Refer to relevant discussion onReselect repo.

GetresultFunc for easilytesting composed selectors.

Return the number of times the selector's result function has been recomputed.

Resetrecomputations count.

GetkeySelector for utility compositions or testing.

• re-reselect your whole redux state
• Understanding reselect and re-reselect
• React re-reselect: Better memoization and cache management
• Advanced Redux patterns: selectors
• Be selective with your state
• A swift developer’s React Native experience
• 5 key Redux libraries to improve code reuse
• Rematch's docs
• Redux re-reselect playground

• Improve tests readability
• Port to native TS based on reselect v5 approach
• Find out whetherre-reselect should be deprecated in favour ofreselect memoization/cache options

Thanks to you all (emoji key):

Andrea Carraro 💻📖🚇⚠️👀	Stepan Burguchev 💻🤔💬👀⚠️	Sergei Grishchenko 💻🤔⚠️🔧	Mateusz Burzyński 💻🚇	Mitch Robb 💻⚠️	Stephane Rufer 💻⚠️	Tracy Mullen 💻⚠️
Sushain Cherivirala 💻	Steve Mao 📖	Gaurav Lahoti 🐛	Lon 🐛	bratushka 💻	Anders D. Johnson 📖	Július Retzer 📖
Maarten Schumacher 🤔	Alexander Jarvis 🤔	Gregg B 💡	Ian Obermiller 👀	Kanitkorn Sujautra 📖	Brian Kraus 📖	el-dav 🐛
Augustin Riedinger 🤔	RichardForrester 🤔	Alfonso Millan 📖	parkerault 🐛	johannes 🐛	Alex de la Mare 🐛💻	Alex Khizhnyi 💻