Remote Redux DevTools
Use Redux DevTools remotely for React Native, hybrid, desktop and server side Redux apps.
Installation
npm install --save-dev remote-redux-devtools
Usage
Just add our store enhancer to your store:
store/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 enhancer = compose(
applyMiddleware(thunk),
devTools()
);
return createStore(reducer, initialState, enhancer);
}
Remote monitoring
Use one of our monitor apps to inspect and redo actions:
The source code is here.
It is also included in the following projects, which you can use:
Communicate via local server
In order to make it simple to use, by default, the module and the monitor app communicate via remotedev.io server. Use remotedev-server cli to run it locally in order to make the connection faster and not to require an internet connection.
Parameters
Name | Description |
---|
name | String representing the instance name to be shown on the remote monitor. |
realtime | Boolean specifies whether to allow remote monitoring. By default is process.env.NODE_ENV === 'development' . |
hostname | String used to specify host for remotedev-server . If port is specified, default value is localhost . |
port | Number used to specify host's port for remotedev-server . |
secure | Boolean specifies whether to use https protocol for remotedev-server . |
filters | Map of arrays named whitelist or blacklist to filter action types. |
maxAge | Number of maximum allowed actions to be stored on the history tree, the oldest actions are removed once maxAge is reached. Default is 30 . |
startOn | String or Array of strings indicating an action or a list of actions, which should start remote monitoring (when realtime is false ). |
stopOn | String or Array of strings indicating an action or a list of actions, which should stop remote monitoring. |
sendOn | String or Array of strings indicating an action or a list of actions, which should trigger sending the history to the monitor (without starting it). Note: when using it, add a fetch polyfill if needed. |
sendOnError | Numeric code: 0 - disabled (default), 1 - send all uncaught exception messages, 2 - send only reducers error messages. |
sendTo | String url of the monitor to send the history when sendOn is triggered. By default is ${secure ? 'https' : 'http'}://${hostname}:${port} . |
id | String to identify the instance when sending the history triggered by sendOn . You can use, for example, user id here, to know who sent the data. |
All parameters are optional. You have to provide at least port
property to use localhost
instead of remotedev.io
server.
Example:
export default function configureStore(initialState) {
return createStore(
rootReducer,
initialState,
devTools({
name: 'Android app', realtime: true,
hostname: 'localhost', port: 8000,
maxAge: 30, filters: { blacklist: ['EFFECT_RESOLVED'] }
})
);
}
Demo
Examples
License
MIT