Flipper plugin for Reselect in React Native

Overview

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

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

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

Acknowledgement

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

Owner
Vlad
Front-end Developer
Vlad
Spokestack: give your React Native app a voice interface!

React Native plugin for adding voice using Spokestack. This includes speech recognition, wakeword, and natural language understanding, as well as synt

Spokestack 37 Aug 23, 2021
Static AST checker for a11y rules on JSX elements.

Get professional support for eslint-plugin-jsx-a11y on Tidelift eslint-plugin-jsx-a11y Static AST checker for accessibility rules on JSX elements. Rea

null 2.5k Sep 22, 2021
Tweak React components in real time. (Deprecated: use Fast Refresh instead.)

React Hot Loader Tweak React components in real time ⚛️ ⚡️ Watch Dan Abramov's talk on Hot Reloading with Time Travel. Moving towards next step React-

Dan Abramov 12.1k Sep 16, 2021
Simple, reactive labels for SolidJS

Install yarn add babel-plugin-solid-labels Features ?? Labels: Turn labels into SolidJS utility calls! ?? Comments: Turn comments into SolidJS utility

Alexis H. Munsayac 26 Sep 22, 2021
:hourglass_flowing_sand: A higher order component for loading components with promises.

A higher order component for loading components with dynamic imports. Install yarn add react-loadable Example import Loadable from 'react-loadable'; i

Jamie Kyle 16.1k Sep 24, 2021
ESLint plugin for react-hook-form

eslint-plugin-react-hook-form react-hook-form is an awsome library which provide a neat solution for building forms. However, there are many rules for

Chuan-Tse Kao 17 Jul 14, 2021
🌟 JavaScript Style Guide, with linter & automatic code fixer

JavaScript Standard Style Sponsored by English • Español (Latinoamérica) • Français • Bahasa Indonesia • Italiano (Italian) • 日本語 (Japanese) • 한국어 (Ko

Standard JS 26.1k Sep 17, 2021
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.2k Sep 15, 2021
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.2k Sep 20, 2021
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.2k Sep 25, 2021
An isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them.

Carte Blanche IMPORTANT: This project is unfinished and not maintained. Do not try to use it, it likely does not work anymore. Carte Blanche is an iso

Carte Blanche 1.5k Sep 10, 2021
🐐 Simple and complete React DOM testing utilities that encourage good testing practices.

React Testing Library Simple and complete React DOM testing utilities that encourage good testing practices. Read The Docs | Edit the docs Table of Co

Testing Library 15.2k Sep 15, 2021
Plugin for http://unexpected.js.org to enable testing the full React virtual DOM, and also the shallow renderer

unexpected-react Plugin for unexpected to allow for testing the full virtual DOM, and against the shallow renderer (replaces unexpected-react-shallow)

Dave Brotherstone 184 Aug 4, 2021
Chai.js assertions and convenience functions for testing React Components with enzyme

chai-enzyme Chai.js assertions for enzyme. Table of Contents Installation Setup Debug output in assertion exceptions Assertions 1. checked() 1. classN

Product Hunt 794 Sep 3, 2021
marquee in react-native

react-native-rolling-text marquee in react-native! Installation npm install react-native-rolling-text yarn add react-native-rolling-text Usage It is a

HYUNGU, KANG 11 Jul 7, 2021
A lightweight, easy to extend web debugging tool developed based on react.

English | 简体中文 A lightweight, easy to extend web debugging tool developed based on react. Easy to use Full-featured Easy to expand high performance Us

腾讯TNTWeb前端团队 175 Sep 18, 2021
Create, isolate and test modular UI components in React.

ui-harness Isolate, test and document modular UI with React using familiar describe/it testing semantics. http://uiharness.com Quick Start (1-minute)

Phil Cockfield 271 Sep 28, 2020
Analytics integration for Redux and ngrx/store

Redux Beacon Analytics integration for Redux and ngrx/store Docs Migration Guide (from v1 to v2) Getting Started (Redux users) Getting Started (ngrx u

Rangle 660 Aug 23, 2021
Utopia is an integrated design and development environment for React.

Utopia is an integrated design and development environment for React. It uses React code as the source of truth, and lets you make real time changes to components by editing it and using a suite of design tools. It's early software, but you can try it today, look at an example project, or read about it on our blog!

Utopia 3.1k Sep 16, 2021