henrikjoreteg / create-selector

Wrapper for reselect to allow deferring creation of selectors.

create-selector

Simple util that wraps reselect's createSelector but adds the ability to define selector dependencies as strings, then resolve them later.

This makes it easier to compose selectors from different parts of your app or combine functionality from different app bundles without having to have direct references to input functions when you're defining them.

In this way you can defer the creation of a selector and populate it later without needing to have direct references to the input selectors when you're first defining it.

Just like reselect, it also attaches the last function as a .resultFunc property for easy testing without needing all the input functions.

example

import { createSelector, resolveSelectors } from 'create-selector'

export const selectUserData = state => state.user
export const shouldFetchData = createSelector(
  'selectIsLoggedIn',
  selectUserData,
  (loggedIn, userData) => {
    if (loggedIn && !userData) {
      return true
    }
  }
)

import { shouldFetchData } from './other-selectors'
import { selectIsLoggedIn } from './auth-selectors'

// later, you can aggregate them
const selectorAggregator = {
  selectIsLoggedIn,
  shouldFetchData
}

// resolves all the string references with the real ones recursively
// until you've got an object with all your selectors combined
resolveSelectors(selectorAggregator)

that's it!

Notes

• There's some tests to show this does what it's supposed to but most of the actual work happens in reselect.
• It tolerates mixing in real selectors too (even if they were created with reselect, directly).

install

npm install create-selector

changes

• 5.0.0 Removed source maps from build. Fixed npm security warnings w/ audit.
• 4.0.3 Optimizing selector resolution algorithm. Huge thanks to @rudionrails and @layflags.
• 4.0.1 building with microbundle (should fix issues with module field in package.json)
• 2.2.0
  • added support for fully resolved input selectors not having to be on the final object
  • improved error handling
  • more test coverage
  • updated dependencies

credits

If you like this follow @HenrikJoreteg on twitter. But in terms of credit, this is just a simple util on top of reselect all the real magic is in there.

license

MIT

create-selector's Issues

Selector resolve timeout too short

Hi Henrik,

I currently use redux-bundler for a SPA at a big Telco company. The App currently has >920 selectors and lots of bundles. The crazy thing is, that in Chrome on Windows and Linux (Ubuntu) I reach the selector resolve timeout limit. Chrome on MacOS works fine, as well as FF on all systems.

To solve this problem I just shitfixed node_modules/redux-bundler/dist/redux-bundler.m.js by replacing >500 with >1000 on postinstall.

Have you ever experienced this issue in a bigger SPA? Do you have a recommendation on how to avoid reaching the timeout limit? Or would it be ok to just increase the timeout to 1000 msec in the create-selector package and publish a new version of redux-bundler?

Thanks!

create-selector/src/index.js

Line 98 in 9bca837

if (duration > 500) {

Support for createStructuredSelector too?

Hi there

This is a great package, helps me cracking cyclic dependencies between multiple subscribers.
Do you think you also can wrap the createStructuredSelector and maybe other remaining public imports from reselect?

There is also the createCachedSelector from re-reselect but probably difficult to include?