https://github.com/jk-gan/flipper-plugin-redux-debugger

Flipper plugin for Redux in React Native
https://github.com/jk-gan/flipper-plugin-redux-debugger

flipper flipper-plugin hacktoberfest react-native redux redux-toolkit

Last synced: about 2 months ago
JSON representation

Flipper plugin for Redux in React Native

• Host: GitHub
• URL: https://github.com/jk-gan/flipper-plugin-redux-debugger
• Owner: jk-gan
• License: mit
• Created: 2020-04-16T07:15:56.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-02-04T10:11:24.000Z (over 1 year ago)
• Last Synced: 2024-04-09T02:50:11.388Z (6 months ago)
• Topics: flipper, flipper-plugin, hacktoberfest, react-native, redux, redux-toolkit
• Language: TypeScript
• Homepage:
• Size: 1.06 MB
• Stars: 112
• Watchers: 3
• Forks: 20
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Redux Debugger Plugin for Flipper

![screenshot of the plugin](https://i.imgur.com/blqn8oT.png)

`flipper-plugin-redux-debugger` allows you read React Native redux logs inside [Flipper](https://fbflipper.com/) now:

- Action

- State comparison

## Get Started

1. Install [redux-flipper](https://github.com/jk-gan/redux-flipper) middleware and `react-native-flipper` in your React Native app:

```bash

yarn add redux-flipper react-native-flipper

# for iOS

cd ios && pod install

```

2. Add the middleware into your redux store:

```javascript

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](https://github.com/jk-gan/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](https://github.com/blankapp/flipper-plugin-reduxinspector) which only for Flutter.