You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
DevTools is a [store enhancer](http://rackt.github.io/redux/docs/Glossary.html#store-enhancer), which should be added to your middleware stack *after*[`applyMiddleware`](http://rackt.github.io/redux/docs/api/applyMiddleware.html) as `applyMiddleware` is potentially asynchronous. Otherwise, DevTools won’t see the raw actions emitted by asynchronous middleware such as [redux-promise](https://github.com/acdlite/redux-promise) or [redux-thunk](https://github.com/gaearon/redux-thunk).
31
29
32
-
To install, firstly import `devTools` into your root React component:
30
+
To use, first create a `DevTools` component by passing a `monitor` component to `createDevTools`. In the following example our `monitor` consists of [`redux-devtools-log-monitor`](https://github.com/gaearon/redux-devtools-log-monitor) docked within [`redux-devtools-dock-monitor`](https://github.com/gaearon/redux-devtools-dock-monitor):
Then, add `devTools` to your store enhancers, and create your store:
54
+
Note that it is not essential to put [`redux-devtools-log-monitor`](https://github.com/gaearon/redux-devtools-log-monitor) inside the dock component, it can be placed wherever you like in the component tree.
55
+
56
+
Next add `instrument()` and (optionally) `persistState()` to your store enhancers, and create your store:
46
57
47
58
```js
59
+
60
+
import { createStore, compose } from'redux';
61
+
import { persistState } from'redux-devtools';
62
+
importrootReducerfrom'../reducers';
63
+
importDevToolsfrom'../containers/DevTools';
64
+
48
65
constfinalCreateStore=compose(
49
66
// Enables your middleware:
50
67
applyMiddleware(m1, m2, m3), // any Redux middleware, e.g. redux-thunk
51
68
52
-
//Provides support for DevTools:
53
-
devTools(),
69
+
//Provide support for DevTools
70
+
DevTools.instrument(),
54
71
55
72
// Lets you write ?debug_session=<name> in address bar to persist debug sessions
Finally, include the DevTools component in your page:
95
+
96
+
####index.js
97
+
98
+
```js
99
+
importReactfrom'react';
100
+
import { render } from'react-dom';
101
+
import { Provider } from'react-redux';
102
+
importconfigureStorefrom'./store/configureStore';
103
+
importTodoAppfrom'./TodoApp';
104
+
importDevToolsfrom'./DevTools';
105
+
106
+
conststore=configureStore();
107
+
108
+
render(
109
+
<Provider store={store}>
110
+
<div>
111
+
<TodoApp />
112
+
<DevTools />
113
+
</div>
114
+
</Provider>
115
+
document.getElementById('app')
116
+
);
117
+
```
118
+
119
+
**Make sure to only use DevTools in development!** In production it will be terribly slow because currently actions just accumulate forever.
120
+
121
+
In Webpack, you can use `DefinePlugin` to turn magic constants like `__DEV__` into `true` or `false` depending on the environment, and import and render `redux-devtools` conditionally behind `if (__DEV__)`. Then, if you have an Uglify step before production, Uglify will eliminate dead `if (false)` branches with `redux-devtools` imports.
122
+
123
+
If you are using ES6 modules with Webpack 1.x, you might try putting your `import` statement inside an `if (__DEV__)` to exclude the DevTools package from your production bundle. This will not work. However, you can work around this by creating separate `dev` and `prod` Root components that are dynamically imported using commonJS `require`:
124
+
125
+
####containers/Root.js
126
+
127
+
```js
128
+
if (process.env.NODE_ENV==='production') {
129
+
module.exports=require('./Root.prod');
130
+
} else {
131
+
module.exports=require('./Root.dev');
132
+
}
60
133
```
61
134
62
-
Finally, include the `DevTools` in your page. You may pass either `LogMonitor` (the default one) or any of the custom monitors described below.
135
+
####Root.dev.js
63
136
64
137
```js
138
+
importReact, { Component } from'react';
139
+
import { Provider } from'react-redux';
140
+
importTodoAppfrom'./TodoApp';
141
+
importDevToolsfrom'./DevTools';
142
+
65
143
exportdefaultclassRootextendsComponent {
66
144
render() {
145
+
const { store } =this.props;
67
146
return (
68
-
<div>
69
-
<Provider store={store}>
70
-
<CounterApp />
71
-
</Provider>
72
-
73
-
<LogMonitor store={store.devToolsStore} />
74
-
</div>
147
+
<Provider store={store}>
148
+
<div>
149
+
<TodoApp />
150
+
<DevTools />
151
+
</div>
152
+
</Provider>
75
153
);
76
154
}
77
155
}
78
156
```
79
157
80
-
**Make sure to only apply `devTools()` in development!** In production, this will be terribly slow because actions just accumulate forever. (We'll need to implement a rolling window for dev too.)
158
+
####Root.prod.js
81
159
82
-
For example, in Webpack, you can use `DefinePlugin` to turn magic constants like `__DEV__` into `true` or `false` depending on the environment, and import and render `redux-devtools` conditionally behind `if (__DEV__)`. Then, if you have an Uglify step before production, Uglify will eliminate dead `if (false)` branches with `redux-devtools` imports. Here is [an example](https://github.com/erikras/react-redux-universal-hot-example/) that adds Redux DevTools handling the production case correctly.
160
+
```js
161
+
importReact, { Component } from'react';
162
+
import { Provider } from'react-redux';
163
+
importTodoAppfrom'./TodoApp';
164
+
165
+
exportdefaultclassRootextendsComponent {
166
+
render() {
167
+
const { store } =this.props;
168
+
return (
169
+
<Provider store={store}>
170
+
<TodoApp />
171
+
</Provider>
172
+
);
173
+
}
174
+
}
175
+
```
83
176
84
177
### Running Examples
85
178
@@ -103,7 +196,7 @@ Oh, and you can do the same with the TodoMVC example as well.
103
196
104
197
### Custom Monitors
105
198
106
-
**You can build a completely custom UI for it**because `<DevTools>` accepts a `monitor` React component prop. The included `LogMonitor`is just an example.
199
+
**DevTools accepts monitor components so you can build a completely custom UI.**[`redux-devtools-log-monitor`](https://github.com/gaearon/redux-devtools-log-monitor) and [`redux-devtools-dock-monitor`](https://github.com/gaearon/redux-devtools-dock-monitor) are just examples of what is possible.
107
200
108
201
**[I challenge you to build a custom monitor for Redux DevTools!](https://github.com/gaearon/redux-devtools/issues/3)**
109
202
@@ -112,22 +205,14 @@ Some crazy ideas for custom monitors:
112
205
* A slider that lets you jump between computed states just by dragging it
113
206
* An in-app layer that shows the last N states right in the app (e.g. for animation)
114
207
* A time machine like interface where the last N states of your app reside on different Z layers
115
-
* Feel free to come up with and implement your own! Check `LogMonitor` propTypes to see what you can do.
208
+
* Feel free to come up with and implement your own! Check [`redux-devtools-log-monitor`](https://github.com/gaearon/redux-devtools-log-monitor) propTypes to see what you can do.
0 commit comments