CODEWITHSUNDEEP
react-nativereduxredux-toolkitredux-devtoolsflipper
petarmanic
petarmanic

Reputation: 184

Redux Debugger plugin in Flipper is unavailable

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

Upvotes: 9

Views: 8268

Answers (4)

Emma
Emma

Reputation: 1

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

Upvotes: 0

Atul Tiwaree
Atul Tiwaree

Reputation: 105

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

Upvotes: 2

Faisal Hassan
Faisal Hassan

Reputation: 620

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

Upvotes: 11

Tymoxx
Tymoxx

Reputation: 176

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.

Upvotes: 8

Related Questions