Stable Alternative - for anyone coming here new!

[TechAkayy]

I'm from the vue.js ecosystem, where the devtools are maintained really well, also there is an electron-standalone (https://devtools.vuejs.org/guide/installation.html#standalone)...

I had to try redux for a nodejs app, and I had hard-time making the remote-redux work with various combinations... esp got the socket error etc etc..

Noticed the below (reply to a old issue couple of years ago) and it worked like a charm.. Any new comers, don't forget to check this out if you are stuck!

https://github.com/TyrealGray/remoteredux-standalone

Thanks to @TyrealGray

---

EDIT: Alright, I did manage to make it work without the above standalone alternative.

DevTool

npm install --save-dev @redux-devtools/cli

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

Enable remote in store (simple version)

import { createStore } from 'redux';
import devToolsEnhancer from 'remote-redux-devtools';
const store = createStore(reducer, devToolsEnhancer());

For advanced version, check https://github.com/zalmoxisus/remote-redux-devtools

Feedback for maintainers - please consider updating:

1. Please remove "connect via remotedev.io" as it looks like it hasn't been maintained in a very long time, as a matter of fact, click on "http://zalmoxisus.github.io/monitoring/" which is displayed on remote-redux-devtools homepage (or) "http://remotedev.io/local" which is displayed under heading Monitoring has some human-test, and then loads INAPPROPRIATE CONTENT.

2. Update link in main redux-devtools repo, where it mentions "...a standalone app..." to the @redux-devtools/cli page (instead of the current link that take to an outdated monitor app)

3. In the @redux-devtools/cli mono repo sub-page, consider removing "RemoteDev", and include details from the "Remote Monitoring" docs from the main redux-devtools page

[solancer]

In case anyone is using redux-toolkit I did, the way worked for me

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

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

[eric-burel]

Incredible, it works perfect. I also add to access the "settings" tab in the devtools UI like this:

As far as I understand, the "redux" part will create a server for debugging redux, while the cli part launch an electron app that embeds Redux-devtools, and can connect to the server created by the app.

[SpaghettiC0des]

In case anyone is using redux-toolkit I did, the way worked for me

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

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

It does not seem to work anymore. I'm not getting any logs.

[rgomezp]

Not working for me. I'm using react native debugger on react native + expo.

This is my package.json:

{
  "name": "MyApp",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@react-native-async-storage/async-storage": "^1.17.10",
    "@react-navigation/bottom-tabs": "^6.0.5",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.1.0",
    "@reduxjs/toolkit": "^1.8.0",
    "expo": "^47.0.0",
    "expo-asset": "~8.7.0",
    "expo-constants": "~14.0.2",
    "expo-font": "~11.0.1",
    "expo-keep-awake": "~11.0.1",
    "expo-linking": "~3.3.0",
    "expo-splash-screen": "~0.17.5",
    "expo-status-bar": "~1.4.2",
    "expo-updates": "~0.15.6",
    "expo-web-browser": "~12.0.0",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-native": "0.70.5",
    "react-native-chart-kit": "^6.12.0",
    "react-native-elements": "^4.0.0-beta.0",
    "react-native-floating-action": "^1.22.0",
    "react-native-fontawesome": "^7.0.0",
    "react-native-safe-area-context": "4.4.1",
    "react-native-screens": "~3.18.0",
    "react-native-svg": "13.4.0",
    "react-native-web": "~0.18.7",
    "react-native-wheely": "^0.6.0",
    "react-redux": "^7.2.6",
    "redux": "^4.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@redux-devtools/cli": "^1.0.7",
    "@types/react": "^18.0.25",
    "@types/react-native": "^0.70.6",
    "@types/remote-redux-devtools": "^0.5.5",
    "eslint": "^8.10.0",
    "eslint-plugin-react": "^7.29.3",
    "eslint-plugin-react-hooks": "^4.3.0",
    "jest": "^26.6.3",
    "jest-expo": "~44.0.1",
    "react-test-renderer": "17.0.1",
    "remote-redux-devtools": "^0.5.16",
    "typescript": "~4.3.5"
  },
  "resolutions": {
    "react-devtools-core": "^4.26.1"
  },
}

My store file looks like this:

import { configureStore } from "@reduxjs/toolkit";
import { compose } from 'redux';
import holdingAreaStraightReducer from "./slices/holdingAreaStraight";
import workoutSelectorSelectedExercisesReducer from "./slices/workoutSelectorSelectedExercises";
import devToolsEnhancer from 'remote-redux-devtools';

const store = configureStore({
  reducer: {
    holdingAreaStraight: holdingAreaStraightReducer,
    workoutSelectorSelectedExercises: workoutSelectorSelectedExercisesReducer,
  },
  enhancers: [devToolsEnhancer({
    realtime: true,
  })],
});

export function subscribeListener(listener: () => void): () => void {
  return store.subscribe(listener);
}

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

export default store;