4

Flipper plugin for Reselect in React Native

 2 years ago
source link: https://reactnativeexample.com/flipper-plugin-for-reselect-in-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

image

Get Started

  1. 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
  1. 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;
JavaScript
  1. Install flipper-plugin-reselect-debugger in Flipper desktop client:
Manage Plugins > Install Plugins > search "reselect-debugger" > Install
  1. 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;
JavaScript

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);
}
JavaScript

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,
    });
  }
}
JavaScript

Acknowledgement

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

GitHub

https://github.com/vlanemcev/flipper-plugin-reselect-debugger


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK