Reselect Debugger Plugin for Flipper

flipper-plugin-reselect-debugger allows you debug Reselect selectors inside Flipper

• Recomputations of selector
• Selectors Inputs
• Selectors Output (In case if selector not dependent from external arguments)
• Last Recomputation reasone
• Dependency Graph
• Highlight Most Recomputed Selectors
• Search by Selectors Graph
• Shows "Not Memoized (NM)" selectors

Get Started

1. Install reselect-debugger-flipper and react-native-flipper in your React Native app:

1yarn add reselect-debugger-flipper react-native-flipper
2# for iOS
3cd ios && pod install

1. Add the configurations into your store (Redux in this example):

1import { createStore, applyMiddleware } from 'redux';
2
3import * as selectors from 'src/redux/selectors';
4
5const middlewares = [/* other middlewares */];
6
7const store = createStore(RootReducer, applyMiddleware(...middlewares));
8
9if (__DEV__) {
10  const reselectDebugger = require('reselect-debugger-flipper');
11  reselectDebugger.configure({
12    selectors
13  });
14}
15
16return store;

2. Install flipper-plugin-reselect-debugger in Flipper desktop client:

Manage Plugins > Install Plugins > search "reselect-debugger" > Install

3. Start your app, then you should be able to see Reselect Debugger on your Flipper app

Optional Configuration

Selector Input / Outputs

By default, outputs only the recomputations of the selector. If you use will pass stateGetter parameter, it will output the selector's input and output values.

1import { createStore, applyMiddleware } from 'redux';
2
3import * as selectors from 'src/redux/selectors';
4
5const middlewares = [/* other middlewares */];
6
7const store = createStore(RootReducer, applyMiddleware(...middlewares));
8
9if (__DEV__) {
10  const reselectDebugger = require('reselect-debugger-flipper');
11  reselectDebugger.configure({
12    selectors,
13  
14    /* for calculate input / outputs of selectors */
15    stateGetter: store.getState,
16  });
17}
18
19return store;

Selectors live updates

You can keep track of how your selectors are recalculated while the application is running.

This is available for Redux and implemented with a middelware connection.

Every time you dispatch an action, selectors will be re-run and analyzed to see if there was a recalculation. If recalculation has occurred, a property will be available that displays the last action due to which the recalculation occurred.

1import { createStore, applyMiddleware } from 'redux';
2
3const middlewares = [/* other middlewares */];
4
5if (__DEV__) {
6  const reselectDebugger = require('reselect-debugger-flipper');
7
8  /* for enable reselect debugger live updates */
9  middlewares.push(reselectDebugger.reduxMiddleware);
10}

All options together

This is an example of how to wire all options together. Just move the debugger import to one place.

1import { createStore, applyMiddleware } from 'redux';
2
3import * as selectors from 'src/redux/selectors';
4
5const configureStore = () => {
6
7  let reselectDebugger;
8  if (__DEV__) {
9    reselectDebbuger = require('reselect-debugger-flipper');
10  }
11
12  const middlewares = [/* other middlewares */];
13  
14  if (__DEV__) {
15    /* for enable reselect debugger live updates */
16    middlewares.push(reselectDebugger.reduxMiddleware);
17  }
18  
19  const store = createStore(RootReducer, applyMiddleware(...middlewares));
20
21  if (__DEV__) {
22    reselectDebugger.configure({
23      selectors,
24
25      /* for calculate input / outputs of selectors */
26      stateGetter: store.getState,
27    });
28  }
29}

Selectors Namespacing

You can give your selectors a special prefix that will appear in the graph. It can be done with using namespaceSelectors function.

1import { createStore, applyMiddleware } from 'redux';
2
3import * as selectors from 'src/redux/selectors';
4import * as otherSelectors from 'src/redux/otherSelectors';
5
6const configureStore = () => {
7
8  let reselectDebugger;
9  if (__DEV__) {
10    reselectDebbuger = require('reselect-debugger-flipper');
11  }
12
13  const middlewares = [/* other middlewares */];
14  
15  if (__DEV__) {
16    /* for enable reselect debugger live updates */
17    middlewares.push(reselectDebugger.reduxMiddleware);
18  }
19  
20  const store = createStore(RootReducer, applyMiddleware(...middlewares));
21
22  if (__DEV__) {
23    reselectDebugger.configure({
24      { 
25        ...reselectDebugger.namespaceSelectors(selectors, 'important'),
26        ...reselectDebugger.namespaceSelectors(otherSelectors, 'other')
27      },
28
29      /* for calculate input / outputs of selectors */
30      stateGetter: store.getState,
31    });
32  }
33}

Acknowledgement

This plugin is inspired by reselect-tools which only for Web.