Reselect-debugger-flipper NPM

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

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

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

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

import { createStore, applyMiddleware } from 'redux';

import * as selectors from 'src/redux/selectors';

const middlewares = [/* other middlewares */];

const store = createStore(RootReducer, applyMiddleware(...middlewares));

if (__DEV__) {
  const reselectDebugger = require('reselect-debugger-flipper');
  reselectDebugger.configure({
    selectors
  });
}

return store;

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

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

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.

import { createStore, applyMiddleware } from 'redux';

import * as selectors from 'src/redux/selectors';

const middlewares = [/* other middlewares */];

const store = createStore(RootReducer, applyMiddleware(...middlewares));

if (__DEV__) {
  const reselectDebugger = require('reselect-debugger-flipper');
  reselectDebugger.configure({
    selectors,
  
    /* for calculate input / outputs of selectors */
    stateGetter: store.getState,
  });
}

return 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.

import { createStore, applyMiddleware } from 'redux';

const middlewares = [/* other middlewares */];

if (__DEV__) {
  const reselectDebugger = require('reselect-debugger-flipper');

  /* for enable reselect debugger live updates */
  middlewares.push(reselectDebugger.reduxMiddleware);
}

All options together

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

import { createStore, applyMiddleware } from 'redux';

import * as selectors from 'src/redux/selectors';

const configureStore = () => {

  let reselectDebugger;
  if (__DEV__) {
    reselectDebbuger = require('reselect-debugger-flipper');
  }

  const middlewares = [/* other middlewares */];
  
  if (__DEV__) {
    /* for enable reselect debugger live updates */
    middlewares.push(reselectDebugger.reduxMiddleware);
  }
  
  const store = createStore(RootReducer, applyMiddleware(...middlewares));

  if (__DEV__) {
    reselectDebugger.configure({
      selectors,

      /* for calculate input / outputs of selectors */
      stateGetter: store.getState,
    });
  }
}

Selectors Namespacing

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

import { createStore, applyMiddleware } from 'redux';

import * as selectors from 'src/redux/selectors';
import * as otherSelectors from 'src/redux/otherSelectors';

const configureStore = () => {

  let reselectDebugger;
  if (__DEV__) {
    reselectDebbuger = require('reselect-debugger-flipper');
  }

  const middlewares = [/* other middlewares */];
  
  if (__DEV__) {
    /* for enable reselect debugger live updates */
    middlewares.push(reselectDebugger.reduxMiddleware);
  }
  
  const store = createStore(RootReducer, applyMiddleware(...middlewares));

  if (__DEV__) {
    reselectDebugger.configure({
      { 
        ...reselectDebugger.namespaceSelectors(selectors, 'important'),
        ...reselectDebugger.namespaceSelectors(otherSelectors, 'other')
      },

      /* for calculate input / outputs of selectors */
      stateGetter: store.getState,
    });
  }
}