Redux Debugger plugin in Flipper is unavailable

Question

I am using React Native v0.65.1 (React Native CLI) and Flipper desktop app v0.114.1 on Windows 10 OS. In my React Native app I am using Redux toolkit. As much as I could explore RN above v0.62 should support Flipper out of the box, and Redux toolkit does not request additional middleware configuration for flipper.

I tried to install npm package of the flipper-plugin-redux-debugger and nothing, Redux Debugger in Flipper is still unavailable.

Where is my problem?

Undulant

Did you follow these steps?: github.com/jk-gan/flipper-plugin-redux-debugger#get-started – Paillette

@Paillette yes, and as documentation says "Starting with React Native 0.62, after generating your project with react-native init, the Flipper integration is ready out of the box for debug builds", so no additional configuration is needed... – Undulant

The documentation says that if you using RN 0.62+ you don't have to install Flipper in your project, not redux middleware. – Paillette

@Paillette yeah, my bad, can you maybe suggest me how to do add it in my redux toolkit store? – Undulant

Sorry, I did not use the redux toolkit so I don't know. I think the configuration is very similar to plain Redux, need to read official documentation or look at some tutorials. – Paillette

Answer 1

@Tymoxx answer is correct, i just want to highlight that do not enable debugger in production app. Modify to this will help

const createDebugger = require('redux-flipper').default; // <-- ADD THIS


const configureCustomStore = () => { 
  const rootReducer = combineReducers({});

  const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) => __DEV__ ? 
    getDefaultMiddleware({ serializableCheck: false}).concat(createDebugger()) : 
    getDefaultMiddleware({
      serializableCheck: false}),
    });

  return {store};
};
    
export const {store} = configureCustomStore();

Saltarello

This didn't resolve the issue. I am still unable to use redux debugger. It gives, "Plugin 'Redux Debugger' is not supported by the selected application 'mickydotsapp' (Android)." – Auctioneer

Answer 2

This is how you add Flipper if your are using Redux Toolkit:

const createDebugger = require('redux-flipper').default; // <-- ADD THIS


const configureCustomStore = () => {
    const rootReducer = combineReducers({
        // ... YOUR REDUCERS
    });


    const store = configureStore({
        reducer: rootReducer,
        middleware: (getDefaultMiddleware) =>
            getDefaultMiddleware()
                .concat(createDebugger()), // <-- ADD THIS
    });

    return {store};
};

export const {store} = configureCustomStore();

Note, if you are using Custom Development Client from Expo, you will need to rebuild the app.

Fitzsimmons

Doing so didn't help, I am still getting the error "Plugin 'Redux Debugger' is not supported by the selected application 'mickydotsapp' (Android)." – Auctioneer

Answer 3

If above solution doesn't works for anyone, please also try this one, click on More (Settings Icon) > Add plugin and search for the plugin with having below details, then install it

name : redux-debugger

version : 2

description : Redux Debugger for Flipper

It worked for me, before this I had installed wrong package since their are other packages with similar name and are not being maintained

Prelature

Answer 4

1 - add flipper redux in your react-native project npm i --save-dev redux-flipper react-native-flipper

2 - install Flipper in oyr system (https://fbflipper.com/)

3 - install redux-debugger plugin in flipper, (not in project, in Flipper), from > More > Add Plugins, > (in my case works) Redux debugger for flipper 2.0.2

4 - Enable redux debugger ( from Flipper) The redux-debugger plugin will be listed in the disabled plugin section. Enable the plugin to get started. Disabled > Redux Debugger > Enable Plugin (maybe you can start yur project to do this step, if is this case, return to this step next)

5 - configure your store (redux toolkit in my case) example from my store:

import { configureStore, Store } from "@reduxjs/toolkit";
import { IBookState, BookSlice } from "../bookSlice/BookSlice";
import { IUserState, UserSlice} from '../userSlice/UserSlice'

export interface IApplicationState {
  readonly bookState: IBookState;
  readonly userState: IUserState;
}

const middlewares: any[] = [];

if (__DEV__) {
  const createDebugger = require("redux-flipper").default;
  middlewares.push(createDebugger());
}

export const store: Store<IApplicationState> = configureStore({
  reducer: {
    bookState: BookSlice.reducer,
    userState: UserSlice.reducer,
  },
  middleware: (getDefaultMiddleware) => 
    getDefaultMiddleware({
      serializableCheck: false,      
    }).concat(middlewares),
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

6 - Add var flipper version in your android/gradle.properties (in your project)

FLIPPER_VERSION =0.212.0 (in my case)

7 - and then in the current directory ./gradlew clean

8 - return to the root folder project and start you app

9 - next you can view your redux state

Alluvial