How to connect to redux devtools?

[RichMatthews]

I'm seeing a fair bit of conflicting info of how to set it up. I'm working with react native

I've gone with this:

import { configureStore } from '@reduxjs/toolkit'
import devToolsEnhancer from 'remote-redux-devtools'
import leaguesReducer from '../reducer'

const store = configureStore({
    reducer: {
        leagues: leaguesReducer,
    },
    devTools: false,
    enhancers: [devToolsEnhancer({ realtime: true })],
})

export default store

passing my store into provider. if I log store.getState() it works in the console. I cant connect to devtools, what do I need to do?

[phryneas]

You are doing the right thing.

Unfortunately though, the https certificate of https://remotedev.io has expired last year. And the remote devtools try to connect over https by default (which is a good thing). So you have to either use a local server, or disable encryption by setting the secure option to false, sending all your store contents unencrypted over the internet.

Unfortunately, both are not very nice options.

@markerikson there is an issue over at https://github.com/zalmoxisus/remote-redux-devtools/issues/139, but @zalmoxisus is not answering. Do you have other ways of contacting them? If it's just the certificate, the we can surely help with that (setting up LetsEncrypt is usually a breeze).

[markerikson]

Not really, no. They were already mostly inactive the last couple years.

The main Redux DevTools repo did get transferred to the reduxjs Github org a few months ago, I think, and @timdorr now has publish rights for the browser extensions.

Don't know if anything was done about this tool, though.

[phryneas]

So the only thing we could really do would be to fork remote-redux-devtools and set up our own domain :/

The hosting is something I could probably do on my infrastructure, but right now I have other things on my mind than setting it up. But let's put it on the TODO list in the long run.

[timdorr]

Yes, I do have access to all of that now. There was an effort to get that all updated, but I think it fizzled out a bit.

[markerikson]

Oh good - does that really include the remote-redux-devtools repo / site too?

Lenz, are you saying that it's a site that needs a new cert? I haven't looked at remote-redux-devtools to see how it works.

[phryneas]

Yup, exactly that. That same cert might need some extra configuration to be also delivered over websocket (?) but that's the exact same cert.

Click this link to see: https://remotedev.io/ - as soon as you accept the insecure certificate, the remote devtools start working again as long as the redux that tries to connect from them is running in the same browser that does just allow the insecure connection now. (just that's not really the point of remote-dev-tools -.-)

[RichMatthews]

so I've managed to successfully connect to React Native Debugger app.

and this worked:

const store = createStore(leaguesReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

how would this look as the equivalent in toolkit? where do I put the window. references?

[markerikson]

RTK's configureStore should do that automatically:

configureStore({reducer: leaguesReducer})

[RichMatthews]

ah cool, yeh that worked. might be worth updating the docs slightly here as it is simple to setup with React Native as it turns out but it took me a couple of days and a bunch of internet browsing to get there

[markerikson]

@RichMatthews can you clarify what specific steps need to be done to get this to work with RN?

[jkoutavas]

@RichMatthews can you clarify what specific steps need to be done to get this to work with RN?

@RichMatthews yes, please chime in. :-)

[hasanaktas]

Can anyone make it with React native? I still haven't succeeded

[Pepeu07]

@hasanaktas @markerikson After a few hours this is what worked for me:

const store = configureStore({ reducer:{ general:GeneralReducers }, devTools:[ devToolsEnhancer({ realtime: true }) ], })

I've only been able to get it to work with the React Native Debugger app (https://github.com/jhen0409/react-native-debugger)

The steps that I took where: 1) run project 2) open React Native Debugger app at the desired port open 'rndebugger://set-debugger-loc?host=localhost&port=8070' which I made a packadge.json script for convenience 3) then I started the debug mode on the project

Hope this helps

[Sir-hennihau]

@Pepeu07 I tried it myself. I could even connect to React Native Debugger without any additional configuration.

export const rootStore = configureStore({
    reducer: rootReducer,
});

       "react-native": "0.62.0",
        "react": "16.11.0",
        "@reduxjs/toolkit": "^1.5.1",
        "react-redux": "^7.2.4"

[phamquyetthang]

Can anyone make it with React native? I still haven't succeeded

use react-native-debugger , you open redux devtool without any config

[solancer]

Here's how I got it working

Installed DevTool cli

yarn add --dev @redux-devtools/cli

add below config as a script

"scripts": { "redux-devtools": "redux-devtools --open=electron --hostname=localhost --port=8000" }

Make changes to store like below (don't forget to add port number same as the script above)

import { configureStore } from '@reduxjs/toolkit'
import authReducer from '../features/auth/authSlice';
import devToolsEnhancer from 'remote-redux-devtools';

export default configureStore({
    reducer: {
        auth:authReducer,
    },
    devTools: false,
    enhancers: [devToolsEnhancer({ realtime: true, port: 8000 })],
})

First, run the localserver

yarn redux-devtools

then the react application if not already serving someplace

yarn start

finally connect

[spirobel]

@solancer do we need to to pass the actioncreators, like in: https://github.com/zalmoxisus/redux-devtools-extension/commit/64717bb9b3534ff616d9db56c2be680627c7b09d ?

export default configureStore({
    reducer: {
        auth:authReducer,
    },
    devTools: false,
    enhancers: [devToolsEnhancer({ actionCreators, trace: true, traceLimit: 25,realtime: true, port: 8000 })],
})

seems like tracing of actions does not work. Also it seems like a hassle to pass the actionCreators manually. (I need to use the remote devtools, because I work on a browser extension)

[umarabdullah23]

How to do in typescript?

[phryneas]

@umarCogentlabs with exactly the same code.

[dipanjanpanja6]

just do devTools: true , its working for me

const store = configureStore({
  reducer: {
    // Add the generated reducer as a specific top-level slice
  },
  devTools: true,
});

[Bsingh2697]

I have setup this but still not working, doesn't show anything in extension

Edit : It worked after cleaning and restarting

[phryneas]

@Bsingh2697 you should not even need devTools: true. Are you in the same browser here?

[dipanjanpanja6]

@Bsingh2697 remove enhancers and middleware and try once.

[spirobel]

just do devTools: true , its working for me

@dipanjanpanja6 what if you need to use remote devtools like me? (I am developing a browser extension, so the normal redux devtools dont work)

[B-R-Bender]

hey guys I wonder if anyone knows how to make DevTools work with https dev server?

[phryneas]

@B-R-Bender the devtools are in your browser, so is the website - there is no data sent over any wire, so it doesn't matter if you use http or https

[B-R-Bender]

@phryneas the thing is I'm using nx as a monorepo handler and one I've update my config to use ssl I'm not able to see anything in redux devtools I've tried to turn ssl off and devtools are back

[phryneas]

@B-R-Bender you are looking at a website that is using Redux and you have opened the Redux Devtools in the same browser tab, right?

[B-R-Bender]

@phryneas sure but looks like it was a glitch (not sure where exactly) as today, after I've switched to https again, it works just fine

[mirek11s]

has anyone manage to make the debugger work with windows machine?

[Awais6]

no option work for me

[w4t3r-45]

sam issue happens for expo with SDK 49 any solution please ?

[maniac-tech]

I'm facing this issue with Expo v49, any update or known solutions to it ?

[xXanth0s]

This worked for me.

First of all, install the package @redux-devtools/cli via

npm i -D @redux-devtools/cli

Add this script to your package.json and start the script. A redux devtool app should appear.

"redux-devtools": "redux-devtools --open=electron --hostname=localhost --port=8000",

In your app, change the store to the following configuration

const backgroundStore = configureStore<StateModel>({
  reducer: storeReducers,
  devTools: false,
  enhancers: getDefaultEnhancers =>
    getDefaultEnhancers()
      .concat(devToolsEnhancer({ realtime: true, hostname: 'localhost', port: 8000 })),
});

Start your app. You should see your redux store in the redux dev tools window, which has beened opened before. If not, set this configuration

[liquidvisual]

@xXanth0s Did your solution work for Expo v49-51? I'm pretty sure it doesn't work with Hermes and we're all doomed to suffer zero DX for all eternity.