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.

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

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

2. 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));

3. 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

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

2. 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));

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

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

4. 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

Comments

[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🤔

[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.

[Hanno J. Gödecke]

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

[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