How To Register Reselect With Store

Reselect Tools

Travis npm package

Tools for working with the reselect library: Cheque selector dependencies, inputs, outputs, and recomputations at whatever fourth dimension without refreshing!

Graph

export const data$ = ( state ) => state . data ;

export const ui$ = ( country ) => country . ui ;

export const users$ = createSelector ( data$ , ( information ) => information . users ) ;

export const currentUser$ = createSelector ( ui$ , users$ , ( ui , users ) => users [ ui . currentUser ] ) ;

...

import * as selectors from ' ./selectors.js '

import * equally ReselectTools from ' reselect-tools '

ReselectTools . getStateWith ( ( ) => store . getState ( ) )

ReselectTools . registerSelectors ( selectors )

...

ReselectTools . checkSelector ( ' currentUser$ ' )

=> {

inputs : [ { currentUser : 1 } , users : { i : { name : ' sam ' } } ]

outputs : { name : ' sam ' } ,

dependencies : [ ui$ , users$ ] ,

recomputations : 1 ,

isNamed : simulated ,

selectorName : ' currentUser$ '

}

selectorGraph ( )

=> {

nodes : {

" data$ " : {

proper name : " data$ " ,

recomputations : " North/A "

} ,

" ui$ " : {

name : " ui$ " ,

recomputations : " N/A "

} ,

" users$ " : {

name : " user$ " ,

recomputations : 1

} ,

" currentUser$ " : {

name : " currentUser$ " ,

recomputations : 1

} ,

edges : [

{ from : users$ , to : data$ } ,

{ from : currentUser$ , to : users$ } ,

{ from : currentUser$ , to : ui$ } ,

]

}

Tabular array of Contents

Motivation
Getting Started
Example
API
- getStateWith
- checkSelector
- selectorGraph
- registerSelectors
License

Motivation

Information technology'due south handy to visualize the application state tree with the Redux Devtools. But I was using selectors a lot, and there was no easy way to visualize the computed country tree. So, I created this library to output graphs like this one:

Graph

This library was intended to be used with the chrome extension. However, it tin can be still exist useful without the chrome extension installed. The chrome extension will be useless without this library.

See the original reselect issue here.

Getting Started

Firstly, I apologize in advance that this section is required. Information technology would exist slap-up to match the feel of installing redux devtools or react's. Hopefully the tools will be more tightly integrated with reselect at some signal and these steps won't be necessary.

Install the Package

                                      npm install -s reselect-tools

Grab the Chrome Extension

Edifice the Graph:

In guild to start building out the selector graph, we demand to tell the devtools nigh the selectors.

                  import { registerSelectors } from 'reselect-tools' registerSelectors({ mySelector$ })

If you're keeping all your selectors in the same place, this is dead elementary:

                  import * equally selectors from './selectors.js' registerSelectors(selectors)

That'southward it! At this bespeak you should be able to open the devtools and view the selector graph.

The tools will automatically observe and proper name dependencies of the selectors. If y'all desire to override the name of a selector, you can practise then:

                  const foo$ = createSelector(bar$, (foo) => foo + 1); foo$.selectorName = 'bar$' // selector while show up as 'bar'

Checking Selector Inputs and Outputs

Imagine that your tests are passing, but you lot recall some selector in your app might be receiving bad input from a depended-upon selector. Where in the chain is the problem? In social club to allow checkSelector and by extension, the extension, to go this data, we demand to requite Reselect Tools some way of feeding state to a selector.
```
                  import store from './configureStore' ReselectTools.getStateWith(() => store.getState())                                  
```

Example

The instance is running here. Grab the extension and accept a look!

              npm run example

API

getStateWith(func)

getStateWith accepts a function which returns the electric current country. This land is so passed into checkSelector. In well-nigh cases, this will be store.getState()

checkSelector(selector)

Outputs data about the selector at the given fourth dimension.

By default, outputs but the recomputations of the selector. If you use getStateWith, it will output the selector's input and output values. If you utilize registerSelectors, you can laissez passer it the string name of a selector.

const two$ = ( ) => 2 ;

const iv$ = ( ) => 4

const mySelector$ = createSelector ( two$ , 4$ , ( two , 4 ) => ii + four )

registerSelectors ( { mySelector$ } )

getStateWith ( ( ) => null )

checkSelector ( ' mySelector$ ' )

inputs : [ 2 , four ] ,

output : 6 ,

dependencies : [ 2$ , four$ ] ,

recomputations : ane ,

}

selectorGraph(selectorKey = defaultSelectorKey)

selectorGraph outputs a POJO with nodes and edges. A node is a selector in the tree, and an edge goes from a selector to the selectors it depends on.

Using custom selectorKeys

Nodes in the graph are keyed by string names. The name is determined past the selectorKey function. This function takes a selector outputs a string which must be unique and consequent for a given selector. The defaultSelectorKey looks for a function name, then a friction match in the registry, and finally resorts to calling toString on the selector's resultFunc.

Encounter the tests for an alternate selectorKey.

registerSelectors(keySelectorObj)

Add a named selector to the graph. Ready selector names equally keys and selectors every bit values.

Without The Extension

If you're using an unsupported browser, or aren't happy with the extension, you can however get at the data.

The dev tools bind to your app via this global:

                              window.__RESELECT_TOOLS__ = {     selectorGraph,     checkSelector   }

Even without the devtools, y'all can call __RESELECT_TOOLS__.checkSelector('mySelector$') from the developer panel or __RESLECT_TOOLS__.selectorGraph() to meet what'south going on. If the JSON output of the graph is difficult to parse, there'due south an case of how to create a visual selector graph hither.