Redux Debugger plugin in Flipper is unavailable

user_13140646 0
Viewed 2377

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

redux-devtools flipper redux-toolkit redux react-native
2 Answers

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.

user_76380470

@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();
user_73712690
Related