Skip to content

Commit 4670a82

Browse files
committed
Tweak the instructions
1 parent 68c4e66 commit 4670a82

File tree

1 file changed

+19
-9
lines changed

1 file changed

+19
-9
lines changed

Diff for: README.md

+19-9
Original file line numberDiff line numberDiff line change
@@ -21,36 +21,46 @@ A live-editing time travel environment for [Redux](https://github.com/rackt/redu
2121
npm install --save-dev redux-devtools
2222
```
2323

24-
DevTools is a store enhancer, which should be added to your middleware stack *after* `applyMiddleware` as `applyMiddleware` is potentially asynchronous. Otherwise, DevTools won't see the raw actions emitted by the Promise store enhancer etc.
24+
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 wont 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).
2525

26-
To install, firstly import `devTools` into your App container:
27-
```
26+
To install, firstly import `devTools` into your root React component:
27+
28+
```js
29+
// Redux utility functions
30+
import { compose, createStore, applyMiddleware } from 'redux';
31+
// Redux DevTools store enhancers
2832
import { devTools, persistState } from 'redux-devtools';
33+
// React components for Redux DevTools
2934
import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
3035
```
3136

32-
Then, add `devTools` to your middleware, and create your store:
33-
```
37+
Then, add `devTools` to your store enhancers, and create your store:
38+
39+
```js
3440
const finalCreateStore = compose(
41+
// Enables your middleware:
3542
applyMiddleware(thunk),
43+
// Provides support for DevTools:
3644
devTools(),
45+
// Lets you write ?debug_session=<name> in address bar to persist debug sessions
3746
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)),
3847
createStore
3948
);
4049

4150
const store = finalCreateStore(reducer);
4251
```
4352

44-
Lastly, include the `DebugPanel` in your page:
45-
```
46-
export default class App extends Component {
53+
Finally, include the `DevTools` in your page. You may pass either `LogMonitor` (the default one) or any of the custom monitors described below. For convenience, you can use `DebugPanel` to dock `DevTools` to some part of the screen, but you can put it also somewhere else in the component tree.
54+
55+
```js
56+
export default class Root extends Component {
4757
render() {
4858
return (
4959
<div>
5060
<Provider store={store}>
5161
{() => <CounterApp />}
5262
</Provider>
53-
<DebugPanel top right bottom key="debugPanel">
63+
<DebugPanel top right bottom>
5464
<DevTools store={store} monitor={LogMonitor} />
5565
</DebugPanel>
5666
</div>

0 commit comments

Comments
 (0)