Remote Redux DevTools monitor on React Native Debugger UI

Inject remote-redux-devtools monitor to React Native debugger. The monitor is used remotedev-app.

Installation

$ npm install -g remote-redux-devtools-on-debugger

Usage

$ remotedev-debugger-replace --hostname localhost --port 5678

The ./node_modules/react-native/local-cli/server/util/debugger.html will be replaced.

The hostname, port is optional, when you open debugger-ui, will connect to your remotedev server point with options (Of course, you can also set in the UI), if you not set hostname, it will apply default options.

Use custom options in React Native project

You can ignore this guide if you used default options.

Install dev dependencies

# remote-redux-devtools module & remotedev CLI tool
$ npm install --save-dev remote-redux-devtools
# remotedev-debugger-replace CLI tool
$ npm install --save-dev remote-redux-devtools-on-debugger

Add to scripts field (package.json)

"debugger-replace": "remotedev-debugger-replace --hostname localhost --port 5678",
"remotedev": "npm run debugger-replace && remotedev --hostname localhost --port 5678",

If you debug on real device, you should use LAN IP instead of localhost.

Edit configureStore.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import devTools from 'remote-redux-devtools';
import reducer from '../reducers';

export default function configureStore(initialState) {
  const finalCreateStore = compose(
    applyMiddleware(thunk),
    devTools({
      hostname: 'localhost',
      port: 5678,
      autoReconnect: true
    })
  )(createStore);
  return finalCreateStore(reducer, initialState);
}

Run

$ npm run remotedev
# on another terminal tab
$ react-native start

You can reference this example.

License

MIT