6

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?

Flipper desktop

Redux toolkit store

petarmanic
  • 154
  • 2
  • 4
  • Did you follow these steps?: https://github.com/jk-gan/flipper-plugin-redux-debugger#get-started – ridvanaltun Oct 13 '21 at 09:20
  • @ridvanaltun 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... – petarmanic Oct 13 '21 at 09:33
  • The documentation says that if you using RN 0.62+ you don't have to install `Flipper` in your project, not redux middleware. – ridvanaltun Oct 13 '21 at 09:37
  • @ridvanaltun yeah, my bad, can you maybe suggest me how to do add it in my redux toolkit store? – petarmanic Oct 13 '21 at 09:54
  • 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. – ridvanaltun Oct 13 '21 at 09:59

3 Answers3

8

@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();
Prasad Kavinda
  • 174
  • 3
  • 15
Faisal Hassan
  • 517
  • 7
  • 10
  • 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)." – Ritik Jangir Jul 04 '23 at 09:57
7

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.

Tymoxx
  • 167
  • 2
  • 11
  • Doing so didn't help, I am still getting the error "Plugin 'Redux Debugger' is not supported by the selected application 'mickydotsapp' (Android)." – Ritik Jangir Jul 04 '23 at 09:58
0

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 package with similar name and are not being maintained

Atul Tiwaree
  • 27
  • 1
  • 5