1 | Remote Redux DevTools
|
2 | =====================
|
3 |
|
4 | ![Demo](demo.gif)
|
5 |
|
6 | Use [Redux DevTools](https://github.com/gaearon/redux-devtools) remotely for React Native, hybrid, desktop and server side Redux apps.
|
7 |
|
8 | ### Installation
|
9 |
|
10 | ```
|
11 | npm install --save-dev remote-redux-devtools
|
12 | ```
|
13 |
|
14 | ### Usage
|
15 |
|
16 | There are 2 ways of usage depending if you're using other store enhancers (middlewares) or not.
|
17 |
|
18 | #### Add DevTools enhancer to your store
|
19 |
|
20 | If you have a basic [store](http://redux.js.org/docs/api/createStore.html) as described in the official [redux-docs](http://redux.js.org/index.html), simply replace:
|
21 | ```javascript
|
22 | import { createStore } from 'redux';
|
23 | const store = createStore(reducer);
|
24 | ```
|
25 | with
|
26 | ```javascript
|
27 | import { createStore } from 'redux';
|
28 | import devToolsEnhancer from 'remote-redux-devtools';
|
29 | const store = createStore(reducer, devToolsEnhancer());
|
30 | // or const store = createStore(reducer, preloadedState, devToolsEnhancer());
|
31 | ```
|
32 |
|
33 | > Note: passing enhancer as last argument requires redux@>=3.1.0
|
34 |
|
35 | #### Use DevTools compose helper
|
36 |
|
37 | If you setup your store with [middleware and enhancers](http://redux.js.org/docs/api/applyMiddleware.html), change this:
|
38 | ```javascript
|
39 | import { createStore, applyMiddleware, compose } from 'redux';
|
40 |
|
41 | const store = createStore(reducer, preloadedState, compose(
|
42 | applyMiddleware(...middleware),
|
43 | // other store enhancers if any
|
44 | ));
|
45 | ```
|
46 | to:
|
47 | ```javascript
|
48 | import { createStore, applyMiddleware } from 'redux';
|
49 | import { composeWithDevTools } from 'remote-redux-devtools';
|
50 |
|
51 | const store = composeWithDevTools(reducer, /* preloadedState, */ composeWithDevTools(
|
52 | applyMiddleware(...middleware),
|
53 | // other store enhancers if any
|
54 | ));
|
55 | ```
|
56 | or with devTools' options:
|
57 | ```javascript
|
58 | import { createStore, applyMiddleware } from 'redux';
|
59 | import { composeWithDevTools } from 'remote-redux-devtools';
|
60 |
|
61 | const composeEnhancers = composeWithDevTools({ realtime: true, port: 8000 });
|
62 | const store = composeWithDevTools(reducer, /* preloadedState, */ composeEnhancers(
|
63 | applyMiddleware(...middleware),
|
64 | // other store enhancers if any
|
65 | ));
|
66 | ```
|
67 |
|
68 | #### Important
|
69 |
|
70 | In order not to allow it in production by default, the enhancer will have effect only when `process.env.NODE_ENV === 'development'`. In case you don't set `NODE_ENV` or want to use it in production, set `realtime` parameter to `true`:
|
71 |
|
72 | ```js
|
73 | const store = createStore(reducer, devToolsEnhancer({ realtime: true }));
|
74 | ```
|
75 |
|
76 | ### Monitoring
|
77 |
|
78 | Use one of our monitor apps to inspect and dispatch actions:
|
79 | * [web](http://remotedev.io/local)
|
80 | * [redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension) - Click "Remote" button (or press [`Cmd+Ctrl+Arrow up`](https://github.com/zalmoxisus/redux-devtools-extension#keyboard-shortcuts)) to open remote monitoring.
|
81 | * [react-native-debugger](https://github.com/jhen0409/react-native-debugger) - Electron app, which already includes `remotedev-server`, `remotedev-app` and even React DevTools.
|
82 | * [chrome app](https://chrome.google.com/webstore/detail/remotedev/faicmgpfiaijcedapokpbdejaodbelph).
|
83 | * [remote-redux-devtools-on-debugger](https://github.com/jhen0409/remote-redux-devtools-on-debugger) - Used in React Native debugger as a dock monitor.
|
84 | * [atom-redux-devtools](https://github.com/zalmoxisus/atom-redux-devtools) - Used in Atom editor.
|
85 | * [redux-dispatch-cli](https://github.com/jhen0409/redux-dispatch-cli) - A CLI tool for Redux remote dispatch.
|
86 |
|
87 | Use [remotedev-app](https://github.com/zalmoxisus/remotedev-app) to create your own monitor app.
|
88 |
|
89 | ### Communicate via local server
|
90 |
|
91 | In order to make it simple to use, by default, the module and the monitor app communicate via [remotedev.io](http://remotedev.io) server. Use [remotedev-server](https://github.com/zalmoxisus/remotedev-server) cli to run it locally in order to make the connection faster and not to require an internet connection.
|
92 | You can import it in your `server.js` script and start remotedev server together with your development server:
|
93 | ```js
|
94 | var remotedev = require('remotedev-server');
|
95 | remotedev({ hostname: 'localhost', port: 8000 });
|
96 | ```
|
97 | See [remotedev-server](https://github.com/zalmoxisus/remotedev-server) repository for more details.
|
98 | For React Native you can use [react-native-debugger](https://github.com/jhen0409/react-native-debugger) or [remote-redux-devtools-on-debugger](https://github.com/jhen0409/remote-redux-devtools-on-debugger), which already include `remotedev-server`.
|
99 |
|
100 |
|
101 | ### Parameters
|
102 |
|
103 | Name | Description
|
104 | ------------- | -------------
|
105 | `name` | *String* representing the instance name to be shown on the remote monitor.
|
106 | `realtime` | *Boolean* specifies whether to allow remote monitoring. By default is `process.env.NODE_ENV === 'development'`.
|
107 | `hostname` | *String* used to specify host for [`remotedev-server`](https://github.com/zalmoxisus/remotedev-server). If `port` is specified, default value is `localhost`.
|
108 | `port` | *Number* used to specify host's port for [`remotedev-server`](https://github.com/zalmoxisus/remotedev-server).
|
109 | `secure` | *Boolean* specifies whether to use `https` protocol for [`remotedev-server`](https://github.com/zalmoxisus/remotedev-server).
|
110 | `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`.
|
111 | `filters` | *Map of arrays* named `whitelist` or `blacklist` to filter action types. See the example bellow.
|
112 | `actionSanitizer` | *Function* which takes action object and id number as arguments, and should return action object back. See the example bellow.
|
113 | `stateSanitizer` | *Function* which takes state object and index as arguments, and should return state object back. See the example bellow.
|
114 | `startOn` | *String* or *Array of strings* indicating an action or a list of actions, which should start remote monitoring (when `realtime` is `false`).
|
115 | `stopOn` | *String* or *Array of strings* indicating an action or a list of actions, which should stop remote monitoring.
|
116 | `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.
|
117 | `sendOnError` | *Numeric* code: `0` - disabled (default), `1` - send all uncaught exception messages, `2` - send only reducers error messages.
|
118 | `sendTo` | *String* url of the monitor to send the history when `sendOn` is triggered. By default is `${secure ? 'https' : 'http'}://${hostname}:${port}`.
|
119 | `actionCreators` | *Array* or *Object* of action creators to dispatch remotely. See [the example](https://github.com/zalmoxisus/remote-redux-devtools/commit/b54652930dfd4e057991df8471c343957fd7bff7).
|
120 | `shouldHotReload` | *Boolean* - if set to `false`, will not recompute the states on hot reloading (or on replacing the reducers). Default to `true`.
|
121 | `shouldRecordChanges`| *Boolean* - if specified as `false`, it will not record the changes till clicked on "Start recording" button on the monitor app. Default is `true`.
|
122 | `shouldStartLocked` | *Boolean* - if specified as `true`, it will not allow any non-monitor actions to be dispatched till `lockChanges(false)` is dispatched. Default is `false`.
|
123 | `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.
|
124 |
|
125 | All parameters are optional. You have to provide at least `port` property to use `localhost` instead of `remotedev.io` server.
|
126 |
|
127 | Example:
|
128 | ```js
|
129 | export default function configureStore(preloadedState) {
|
130 | const store = createStore(
|
131 | reducer,
|
132 | preloadedState,
|
133 | devToolsEnhancer({
|
134 | name: 'Android app', realtime: true,
|
135 | hostname: 'localhost', port: 8000,
|
136 | maxAge: 30, filters: { blacklist: ['EFFECT_RESOLVED'] },
|
137 | actionSanitizer: (action) => (
|
138 | action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data ?
|
139 | { ...action, data: '<<LONG_BLOB>>' } : action
|
140 | ),
|
141 | stateSanitizer: (state) => state.data ? { ...state, data: '<<LONG_BLOB>>' } : state
|
142 | })
|
143 | );
|
144 | return store;
|
145 | }
|
146 | ```
|
147 |
|
148 | ### Demo
|
149 | - [Toggle monitoring](http://zalmoxisus.github.io/monitoring/)
|
150 |
|
151 | ### Examples
|
152 | - [Web](https://github.com/zalmoxisus/remote-redux-devtools/tree/master/examples)
|
153 | - [React Native](https://github.com/chentsulin/react-native-counter-ios-android)
|
154 |
|
155 | ### License
|
156 |
|
157 | MIT
|