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
- For
- Redux or Redux-Toolkit
Get Started
- Install redux-flipper middleware and
react-native-flipperin 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" >
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-flipperin 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…
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
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)
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🤔
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.
Does the app have to be in debugging mode in order to use this?
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