Introducing Flipper Redux plugin

Gan Jun Kai — Sun, 19 Apr 2020 05:39:15 +0000

Flipper is a platform for debugging iOS, Android and React Native apps. It is a companion for mobile app development on iOS and Android with a bunch of useful tools including a log viewer, interactive layout inspector, and network inspector. Starting from React Native 0.62, flipper support is enabled by default.

After some time using Flipper, a friend of mine, @plwai , and I decided to create a redux plugin for React Native for Flipper since we are using redux toolkit in our project.

jk-gan / redux-flipper

Redux middleware for React Native for Flipper

Redux Flipper

Redux middleware for Flipper. It can log redux actions and show inside Flipper using flipper-plugin-redux-debugger.

Support

React Native
- For react-native >= 0.62, flipper support is enabled by default
- For react-native < 0.62, follow these steps to setup your app
Redux or Redux-Toolkit

Get Started

Install redux-flipper middleware and react-native-flipper in your React Native app:

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

Add the middleware into your redux store:

import { createStore, applyMiddleware } from 'redux';

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

if (__DEV__) {
  const createDebugger = require('redux-flipper').default;
  middlewares.push(createDebugger());
}

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

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

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

…

View on GitHub

jk-gan / flipper-plugin-redux-debugger

Flipper plugin for Redux in React Native

Redux Debugger Plugin for Flipper

flipper-plugin-redux-debugger allows you read React Native redux logs inside Flipper now:

Action
State comparison

Get Started

Install redux-flipper middleware and react-native-flipper in your React Native app:

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

Add the middleware into your redux store:

import { createStore, applyMiddleware } from "redux";

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

if (__DEV__) {
  const createDebugger = require("redux-flipper").default;
  middlewares.push(createDebugger());
}

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

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

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

Start your app, then you should be able to see Redux Debugger on your Flipper app

Acknowledgement

This plugin is inspired by flipper-plugin-reduxinspector which only for…

View on GitHub

redux-flipper is a redux middleware to send the information into Flipper. flipper-plugin-redux-debugger is a flipper plugin for Flipper Desktop Client to display all the redux logs. They are designed to make it easier to debug redux states using Flipper.

Feature:

The plugin provides some features out of the box:

Action logs
States comparison for each action
Manual redux action dispatcher

the plugin layout

Previously we have to use multiple tools to debug React Native app. Android studio for Android native part, Xcode for iOS native part and browser debugger for redux. With this plugin and Flipper, developers can now debug their apps on a single platform!

If you find this plugin helping in your development workflow, please share it with others.

Let me know what do you think about this article through comments. Any suggestions and feedbacks are welcome! Thanks!

Cover photo credits to Markus Winkler on Unsplash

DEV Community: Gan Jun Kai

Introducing Flipper Redux plugin

jk-gan / redux-flipper

Redux middleware for React Native for Flipper

Redux Flipper

Support

Get Started

jk-gan / flipper-plugin-redux-debugger

Flipper plugin for Redux in React Native

Redux Debugger Plugin for Flipper

Get Started

Acknowledgement

Feature: