DEV Community

Cover image for Introducing Flipper Redux plugin
Gan Jun Kai
Gan Jun Kai

Posted on

Introducing Flipper Redux plugin

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, flipper 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
Enter fullscreen mode Exit fullscreen mode
  1. 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));
Enter fullscreen mode Exit fullscreen mode
  1. Install flipper-plugin-redux-debugger in Flipper desktop client:
Manage Plugins > Install Plugins > search "redux-debugger" >

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
Enter fullscreen mode Exit fullscreen mode
  1. 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));
Enter fullscreen mode Exit fullscreen mode
  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…

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

Top comments (4)

Collapse
 
danieloi profile image
Mayowa Daniel

I saw an issue with react-navigation. Will that be fixed any time soon?
Might hop on it, but no guarantees on a timeline.
Especially with Remote debugging quirks from Reanimated 2, Flipper looks like the future. All the more reason, it should work well with the react-navigation library.
Perhaps blacklisting all actions from the library will be enough🤔

Collapse
 
jkgan profile image
Gan Jun Kai

Hi, we definitely want to make redux-flipper to work nicely with react-navigation. It's good if you can help too. By the way, react-navigation 6 just released a flipper plugin (reddit.com/r/reactnative/comments/...) to debug the route state. It's very useful if you want to do debugging with react-navigation.

Collapse
 
hannojg profile image
Hanno J. Gödecke

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

Collapse
 
adybuciuman profile image
Adrian Buciuman

I tried to use the Manual redux action dispatcher but is not working properly. Is there any syntax or format rule in order to use it properly? It would be great to see an example