Redux devtools on a hermes react-native app

Question

I want to use redux devtools on our react-native app that's using react-native 0.67.1 and hermes.

I don't mind using any known tools (like react-native-debugger, or flipper), but I was blocked on pretty much all of my attempts by various issues so far.

The community is currently on a weird state where:

• react-native-debugger doesn't work with hermes
• flipper gives us Plugin ... is unavailable errors, and it feels like those plugins have been abandoned
• redux-devtools has moved their packages (@redux-devtools) without really providing great docs for react-native projects (does it even work with react-native?)
• remote-redux-devtools (which we had success with in the past) has been abandoned

Is there any way to use redux devtools with a hermes react-native a on 2022?

Here's our code:

    const enhancer = composeWithDevTools(
        applyMiddleware(createDebounce(), thunk, acuityMiddlewareCreator),
        // devTools(remoteDevToolsConfig),
    );
    const store = createStore(persistedReducer, initialState, enhancer);

Answer 1

We ended up using Redux Debugger Plugin for Flipper

We're not REALLY into flipper, but it looks like it get's the job done for us and it's stable.

Answer 2

I would consider using https://github.com/infinitered/reactotron, it's very similaire to react native debugger, it has redux devtools I hope you will like it :)

Answer 3

The flipper integration will be deprecated in react native 0.73 and removed in the next release. Furthermore remote debugging will be deprecated in 0.73 and disabled by default as well, making redux devtools unusable, however manually enabling it can help (as long as the option is still available).

For my react native application using Expo 49, Hermes, Redux Toolkit and TypeScript I was able to investigate my redux state using Reactotron together with the Redux plugin:

1. Install dependencies

    npm install --save-dev reactotron-react-native reactotron-redux

2. Create config file ReactotronConfig.js in project root

    import Reactotron from "reactotron-react-native";
    import { reactotronRedux } from "reactotron-redux";
    
    const reactotron = Reactotron.configure({ name: "React Native App" })
        .useReactNative()
        .use(reactotronRedux())
        .connect();
    
    export default reactotron;

3. Add Reactotron to your store

    import { configureStore } from "@reduxjs/toolkit";
    import { MyReducer, MyState } from "./MyStore";
    import reactotron from "../../../ReactotronConfig";
    
    export interface AppState {
      myState: MyState;
    }
    
    export const AppStore = configureStore<AppState>({
      reducer: {
        myState: MyReducer,
      },
      enhancers: [reactotron.createEnhancer!()],
    });

4. Start your app

5. Start Reactotron Desktop application and reload your app