reduxjs / redux-devtools

DevTools for Redux with hot reloading, action replay, and customizable UI
http://youtube.com/watch?v=xsSnOQynTHs
MIT License
13.94k stars 1.15k forks source link

Can't connect to local server #1620

Open teddis opened 4 months ago

teddis commented 4 months ago

I'm noob to RTK, using for React/Nextjs, and have installed Redux DevTools extension in Mac Chrome browser but cannot connect to my localhost:3000 server. I'm using configureStore() which should automatically enable DevTools according to doc. Searching online and can't find any troubleshooting help.

image

I get this error in the console every time I try to connect:

image

Senninseyi commented 4 months ago

Can you share your code for the store configuration

And also you don't need to connect to custom / local server

teddis commented 4 months ago

Sure, my /src/store/index.ts:

import { configureStore } from "@reduxjs/toolkit"
import { setupListeners } from '@reduxjs/toolkit/query'
import { customApi } from './apps/api/custom'
import type * as rtk from "@reduxjs/toolkit"

// ** Reducers
import chat from "@wildeye/frontend/src/store/apps/chat"
import user from "@wildeye/frontend/src/store/apps/user"
import email from "@wildeye/frontend/src/store/apps/email"
import invoice from "@wildeye/frontend/src/store/apps/invoice"
import calendar from "@wildeye/frontend/src/store/apps/calendar"
import permissions from "@wildeye/frontend/src/store/apps/permissions"

export const store = configureStore({
  reducer: {
    user,
    chat,
    email,
    invoice,
    calendar,
    permissions,
    [customApi.reducerPath]: customApi.reducer,
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      serializableCheck: false,
    }).concat(customApi.middleware),
})
setupListeners(store.dispatch)

export type AppDispatch = typeof store.dispatch
export type RootState = ReturnType<typeof store.getState>

If I don't need to connect to my (local) server, how do I initialize/use the extension?

mavrikio commented 1 week ago

https://reactnative.dev/docs/next/other-debugging-methods

I managed using the react native debugger which is easy, but i not tryied on extension.

Remote debugging must be enabled to connect with react native debugger.

To do this, you need to import...

import NativeDevSettings from 'react-native/Libraries/NativeModules/specs/NativeDevSettings';

And add the following code to your main component:

const connectToRemoteDebugger = () => { NativeDevSettings.setIsDebuggingRemotely(true); };