debuggable-selector.js

'use strict';

import * as Reselect from 'reselect';

export function createSelector (...args) {
  const selector = Reselect.createSelector(...args);
  var debug = false;
  var debugLabel = null;

  function debuggableSelector (...selectorArgs) {
    if (!__DEV__ || !debug) {
      return selector(...selectorArgs);
    }

    const out = selector(...selectorArgs);

    console.groupCollapsed(
      'Selector' + (debugLabel ? ` - ${debugLabel}` : '')
    );
    console.info(out);
    console.groupEnd();

    return out;
  }

  debuggableSelector.debug = (label) => {
    debug = true;
    debugLabel = label;

    return debuggableSelector;
  };

  return debuggableSelector;
}

Before:

import {createSelector} from 'reselect';

const selector = createSelector(
  depA,
  depB,
  // (a, b) => doSomethignWith(a, b) // have to comment out to log it
  (a, b) => {
    var out = doSomethingWith(a, b)
    console.log('TESTING', out)
    return out
  }
)

After:

import {createSelector} from '@utils/selectors';

const selector = createSelector(
  depA,
  depB,
  (a, b) => doSomethingWith(a, b)
).debug('TESTING') // remove when done