Reselect Tools

Tools for working with the reselect library: Check selector dependencies, inputs, outputs, and recomputations at any time without refreshing!

1export const data$ = (state) => state.data;
2export const ui$ = (state) => state.ui;
3export const users$ = createSelector(data$, (data) => data.users);
4export const currentUser$ = createSelector(ui$, users$, (ui, users) => users[ui.currentUser]);
5...
6
7// in configureStore.js
8import * as selectors from './selectors.js'
9import * as ReselectTools from 'reselect-tools'
10
11ReselectTools.getStateWith(() => store.getState())  // allows you to get selector inputs and outputs
12ReselectTools.registerSelectors(selectors) // register string names for selectors
13...
14ReselectTools.checkSelector('currentUser$')
15=> {
16	inputs: [{currentUser: 1}, users: {1: {name: 'sam'}}]
17	outputs: {name: 'sam'},
18	dependencies: [ui$, users$],
19	recomputations: 1,
20    isNamed: false,
21    selectorName: 'currentUser$'
22}
23selectorGraph()
24=> {
25	nodes: {
26		"data$": {
27			name: "data$",
28			recomputations: "N/A"
29		},
30		"ui$": {
31			name: "ui$",
32			recomputations: "N/A"
33		},
34		"users$": {
35			name: "user$",
36			recomputations: 1
37		},
38		"currentUser$": {
39			name: "currentUser$",
40			recomputations: 1
41		},
42	},
43	edges: [
44		{ from: users$, to: data$ },
45		{ from: users$, to: data$ },
46		{ from: currentUser$, to: users$ },
47		{ from: currentUser$, to: ui$ },
48	]
49}

Table of Contents

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

Motivation

It's 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 state tree. So, I created this library to output graphs like this one:

This library was intended to be used with the chrome extension. However, it can be still be 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. It would be great to match the experience of installing redux devtools or react's. Hopefully the tools will be more tightly integrated with reselect at some point and these steps won't be necessary.

1. Install the Package

    npm install -s reselect-tools
   

2. Grab the Chrome Extension

3. Building the Graph:

   In order to start building out the selector graph, we need to tell the devtools about the selectors.

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

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

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

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

   The tools will automatically discover and name dependencies of the selectors. If you want to override the name of a selector, you can do so:

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

4. Checking Selector Inputs and Outputs

   Imagine that your tests are passing, but you think some selector in your app might be receiving bad input from a depended-upon selector. Where in the chain is the problem? In order to allow checkSelector and by extension, the extension, to get this information, we need to give Reselect Tools some way of feeding state to a selector.

   import store from './configureStore'
   ReselectTools.getStateWith(() => store.getState())
   

Example

The example is running here. Grab the extension and take a look!

npm run example

API

getStateWith(func)

getStateWith accepts a function which returns the current state. This state is then passed into checkSelector. In most cases, this will be store.getState()

checkSelector(selector)

Outputs information about the selector at the given time.

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

1const two$ = () => 2;
2const four$ = () => 4
3const mySelector$ = createSelector(two$, four$, (two, four) => two + four)
4registerSelectors({ mySelector$ })
5getStateWith(() => null)
6
7checkSelector('mySelector$')  // {
8									 inputs: [2, 4],
9									 output: 6,
10									 dependencies: [two$, four$],
11									 recomputations: 1,
12								 }

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.

1selectorGraph()
2//  {
3//  	nodes: {
4//  		"data$": {
5//  			name: "data$",
6//  			recomputations: "N/A"
7//  		},
8//  		"ui$": {
9//  			name: "ui$",
10//  			recomputations: "N/A"
11//  		},
12//  		"users$": {
13//  			name: "user$",
14//  			recomputations: 1
15//  		},
16//  		"currentUser$": {
17//  			name: "currentUser$",
18//  			recomputations: 1
19//  		},
20//  	},
21//  	edges: [
22//  		{ from: users$, to: data$ },
23//  		{ from: users$, to: data$ },
24//  		{ from: currentUser$, to: users$ },
25//  		{ from: currentUser$, to: ui$ },
26//  	]
27//  }

Using custom selectorKeys

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

See the tests for an alternate selectorKey.

registerSelectors(keySelectorObj)

Add a named selector to the graph. Set selector names as keys and selectors as values.

Without The Extension

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

The dev tools bind to your app via this global:

  window.__RESELECT_TOOLS__ = {
    selectorGraph,
    checkSelector
  }

Even without the devtools, you can call __RESELECT_TOOLS__.checkSelector('mySelector$') from the developer console or __RESLECT_TOOLS__.selectorGraph() to see what's going on. If the JSON output of the graph is hard to parse, there's an example of how to create a visual selector graph here.

License

MIT