loading...
Cover image for Introducing Flipper Redux plugin

Introducing Flipper Redux plugin

jkgan profile image Gan Jun Kai ・2 min read

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.

GitHub logo jk-gan / redux-flipper

Redux middleware for React Native for Flipper

Redux Flipper

screenshot of the plugin

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, flippler support is enabled by default
    • For react-native < 0.62, follow these steps to setup your app
  • Redux or Redux-Toolkit

Get Started

  1. 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
  1. Add the middleware into your redux store:
import { createStore, applyMiddleware } from 'redux'
if (__DEV__) {
  const createDebugger = require('redux-flipper').default
  let reduxDebugger = createDebugger()
  let store = createStore(RootReducer, {}, applyMiddleware(reduxDebugger));
} else {
  let store = createStore(RootReducer, {});
}
  1. Install flipper-plugin-redux-debugger in Flipper desktop client:
Manage Plugins > Install Plugins > search "redux-debugger" > Install
  1. Start your app, then you should be…

GitHub logo jk-gan / flipper-plugin-redux-debugger

Flipper plugin for Redux in React Native

Redux Debugger Plugin for Flipper

screenshot of the plugin

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

  • Action
  • State comparison

Get Started

  1. 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
  1. Add the middleware into your redux store:
import { createStore, applyMiddleware } from 'redux';

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

  let reduxDebugger = createDebugger();
  let store = createStore(RootReducer, {}, applyMiddleware(reduxDebugger));
} else {
  let store = createStore(RootReducer, {});
}
  1. Install flipper-plugin-redux-debugger in Flipper desktop client:
Manage Plugins > Install Plugins > search "redux-debugger" > Install
  1. 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 Flutter.




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

Plugin layout
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

Discussion

pic
Editor guide
Collapse
hannojg profile image
Hanno J. Gödecke

Does the app have to be in debugging mode in order to use this?