New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Documentation request] expo 49 (hermes) support #1533
Comments
I'm having the same problem. Did you manage to get it to work with Expo SDK 49? |
nothing |
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. |
I was able to make the devtools work on expo 49 using I used this patch (inside Also don't forget to add the
For Android, you'll also need to run reverse tcp on ports
Then open the redux devtools using this command
This is what worked for me, hope it helps |
Legend! Thanks so much for the info - will give it a go later today. 😃 |
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. |
@YosefBlandin also check your store configuration, mine looks like this:
You are right, I forgot to mention that you need to change the connection settings in the devtools to Also, I recall needing to install |
doesn't work for me also, Expo SDK 50. I don't see any actions being reported |
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. |
Appreciate the update, @johnhamlin . Any idea on timeline to get it working with Hermes? |
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. |
Great @johnhamlin, if you have any resources we can use in order to implement Reactotron, it'll be helpful for us. Thank you. |
These are my notes, they assume TypeScript, Expo 50, Expo Router v3, Redux Toolkit v2:
brew install --cask reactotron
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 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() {
// ...
} |
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. 👏👏👏👏👏 |
Thanks for verifying the solution @AldoMX suggested, I will also try sometime and report back on any success/failures |
There seem to be two issues for Expo / RN support left to be fixed. This one is still not completely fixed #1382 (comment) and when it is, the App still doesn't get messages from the Devtools server, for me. What is working for me is adding a Symbol-Polyfill to my App-Entrypoint:
And using the following patch for @redux-devtools/remote, which hacks the implementation by not waiting for any message from the Devtools server. diff --git a/lib/cjs/devTools.js b/lib/cjs/devTools.js
index a6eeb9bee71d032f3264b08babc3061cebe04cf6..f746a70b4771ff59ac5de3c0bd760a43507bc58b 100644
--- a/lib/cjs/devTools.js
+++ b/lib/cjs/devTools.js
@@ -189,6 +189,7 @@ class DevToolsEnhancer {
}
})();
this.started = true;
+ this.isMonitored = true;
this.relay('START');
}
stop = keepConnected => { |
Reactotron is crashing the application when you build it for iOS/Release, see this issue for more details: I updated my notes above to prevent this crash from happening, the only changed file is configureStore({
// ...
enhancers: (getDefaultEnhancers) => {
if (__DEV__) {
const { default: Reactotron } = require('@/util/reactotron');
return getDefaultEnhancers().concat(Reactotron.createEnhancer());
}
return getDefaultEnhancers();
},
}); |
I had to remove Reactotron from my project in order to get working the iOS/Release. Basically after uploading the application to Apple, they had been rejecting the application due a crash in different Apple devices, they don't provide so much details, so this was my solution for those crashes they were reporting. |
I tried figuring out the problems with Hermes, React Native and Remote Devtools a little bit more. See: #1382 (comment) on how to fix the What I discovered: Connection works, but the remote devtools seem to listen to the wrong channel. It listens to the channel |
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.
The text was updated successfully, but these errors were encountered: