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

Dobrinsky

What did you end up using in the end? – Enyedy

@Enyedy I just posted an answer, check it out. – Dobrinsky

Thanks mate. Unfortunately I cannot use Flipper because its not compatible with react-native-firebase and its use_framworks. Appreciate your answer though :-). – Enyedy

@Enyedy we are using flipper with react-native-firebase. Here's our podfile in case it helps. gist.github.com/SudoPlz/28c844b32031f81c34fd029efa9a1ddf – Dobrinsky

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.

Dobrinsky

Answer 2

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

Lucite

Answer 3

For those who miss Redux DevTools for time-travel debugging and live editing, I’ve managed to make it work for React Native with the Hermes engine.

Checkout my repo: https://github.com/aliffazfar/redux-devtools

Redux DevTools with Hermes Engine

The only thing we miss is the network inspector in Chrome, like in the old days. However, we can move on with Reactotron, which works really great for debugging the network, AsyncStorage, and logs.

I have tested and can confirm that RocketSim also work great with React Native to inspect the network. Check this out: https://x.com/AliffAzfar/status/1814121783303569838

Yap

Answer 4

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 :)

Pyrene

We've used it in the past but it's different from redux devtools, and it's running very slow on our devices. It's super slow to get a snapshot of the state, and to be honest I prefer redux devtools. Thanks for the suggestion though. – Dobrinsky

It's an outdated repo and doesn't support M1 Apple Silicon by default – Centrality