[Documentation request] expo 49 (hermes) support

[mrcoles]

tl;dr - Is there a guide or documentation for running redux-devtools with Expo 49?

Hi, thank you for your excellent work on this tool! I’m struggling to get the redux-devtools working with Expo 49+, which is now on the “hermes” JS engine and no longer supports the React Native Debugger (which had redux-devtools baked into it). I’m asking here, because there are lots of unresolved SO posts and forum threads of people running into this issue.

The new debugger opens in a Chrome instance and separately includes the base react devtools too (from the CLI in the terminal shift+m and “Start React devtools”). Ideally the Expo team would add redux-devtools in too, but in the meantime, I’m looking to just run it separately.

The redux-devtools/cli README shows examples of running it on port 8000 (why 8000 is that just arbitrary, what if I have a dev server already using 8000?) and then also mentions something about “Inject to React Native local server”, which doesn’t have enough info to someone who is unfamiliar with the project to understand it and also seems more about vanilla React Native than Expo.

[raul-potor]

I'm having the same problem. Did you manage to get it to work with Expo SDK 49?

[kavinsan]

nothing

[liquidvisual]

Yikes, there's truly no Redux debugging options out there right now (or information) -- why? 😩. I'm definitely going to hold off upgrading Expo - losing Redux debugging would be nightmarish.

[raul-potor]

I was able to make the devtools work on expo 49 using "@redux-devtools/remote": "^0.8.2" and @redux-devtools/cli - install it using npm i -g @redux-devtools/cli. In order to get it to work, you will also need patch-package.

I used this patch (inside patches/@redux-devtools+remote+0.8.2.patch):
@redux-devtools+remote+0.8.2.patch

Also don't forget to add the postinstall to your scripts

"postinstall": "patch-package"

For Android, you'll also need to run reverse tcp on ports 8000 and 8081:

adb reverse tcp:8000 tcp:8000
adb reverse tcp:8081 tcp:8081

Then open the redux devtools using this command

redux-devtools --hostname=localhost --port=8000 --open

This is what worked for me, hope it helps

[liquidvisual]

Legend! Thanks so much for the info - will give it a go later today. 😃

[YosefBlandin]

The solution proposed by @raul-potor didn't work for me, when I opened the Redux DevTools I saw the following error in the console: WebSocket connection to 'ws://localhost:8081/socketcluster/' failed: Connection closed before receiving a handshake response. I was able to see that error because in the settings tab I switched from no remote connection to use local (custom) server, and I entered my hostname and port.

[raul-potor]

@YosefBlandin also check your store configuration, mine looks like this:

import { devToolsEnhancer } from "@redux-devtools/remote";
const store = configureStore({
  reducer: {
    ...
  },
  devTools: process.env.NODE_ENV === "development",
  enhancers:
    (process.env.NODE_ENV === "development" && [
      devToolsEnhancer({ hostname: "localhost", port: 8000 }),
    ]) ||
    undefined,
});

You are right, I forgot to mention that you need to change the connection settings in the devtools to use local (custom) server and set the hostname to localhost and port to 8000

Also, I recall needing to install react-native-get-random-values as well otherwise it would not connect

[ddavydov]

doesn't work for me also, Expo SDK 50. I don't see any actions being reported

[johnhamlin]

It doesn't have time traveling, but if you just need to inspect your store and see a timeline of your actions, you can use Reactotron until we get proper Redux Devtools working with Hermes.

[trydalch]

Appreciate the update, @johnhamlin . Any idea on timeline to get it working with Hermes?

[johnhamlin]

Reactotron works with hermes, @trydalch. I'm not a contributor to this repo, so I don't have any inside info. I'm just using Reactotron to bridge the gap while I wait.

[YosefBlandin]

Great @johnhamlin, if you have any resources we can use in order to implement Reactotron, it'll be helpful for us. Thank you.

[AldoMX]

These are my notes, they assume TypeScript, Expo 50, Expo Router v3, Redux Toolkit v2:

1. Install Reactotron

brew install --cask reactotron

2. Add to project

npx expo install expo-constants
npm install --save-dev reactotron-react-native reactotron-redux

src/util/reactotron.ts

import Constants from 'expo-constants';
import Reactotron from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux';

const tron = Reactotron.configure({
  getClientId: async () => Constants.installationId,
  name: Constants.expoConfig?.name,
})
  .useReactNative()
  .use(reactotronRedux())
  .connect();

export default tron;

src/store.ts

configureStore({
  // ...
  enhancers: (getDefaultEnhancers) => {
    if (__DEV__) {
      const { default: Reactotron } = require('@/util/reactotron');
      return getDefaultEnhancers().concat(Reactotron.createEnhancer());
    }
    return getDefaultEnhancers();
  },
});

src/app/_layout.tsx

// ...

if (__DEV__) {
  require('@/util/reactotron');
}

export default function RootLayout() {
  // ...
}

---

OPTIONAL: Add console.tron global.

src/global.d.ts

import Reactotron from '@/util/reactotron';

declare global {
  interface Console {
    tron?: typeof Reactotron;
  }
}

src/app/_layout.tsx

// ...

if (__DEV__) {
  const { default: tron } = require('@/util/reactotron');
  console.tron = tron;
}

export default function RootLayout() {
  // ...
}

[YosefBlandin]

Excellent, I followed all the steps that @AldoMX mentioned and now I can see all the requests, actions and additionally I have the possibility to subscribe to state changes. We can repeat actions as well using Reactotron. It's a very good alternative in order to develop without having to guess or add console logs across all the reducers. Thank you. 👏👏👏👏👏