Redux-toolkit: 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"