Skip to content

Commit

Permalink
Tweak the instructions
Browse files Browse the repository at this point in the history
  • Loading branch information
gaearon committed Aug 23, 2015
1 parent 68c4e66 commit 4670a82
Showing 1 changed file with 19 additions and 9 deletions.
28 changes: 19 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,36 +21,46 @@ A live-editing time travel environment for [Redux](https://github.com/rackt/redu
npm install --save-dev redux-devtools
```

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.
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).

To install, firstly import `devTools` into your App container:
```
To install, firstly import `devTools` into your root React component:

```js
// Redux utility functions
import { compose, createStore, applyMiddleware } from 'redux';
// Redux DevTools store enhancers
import { devTools, persistState } from 'redux-devtools';
// React components for Redux DevTools
import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
```

Then, add `devTools` to your middleware, and create your store:
```
Then, add `devTools` to your store enhancers, and create your store:

```js
const finalCreateStore = compose(
// Enables your middleware:
applyMiddleware(thunk),
// Provides support for DevTools:
devTools(),
// Lets you write ?debug_session=<name> in address bar to persist debug sessions
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)),
createStore
);

const store = finalCreateStore(reducer);
```

Lastly, include the `DebugPanel` in your page:
```
export default class App extends Component {
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.

```js
export default class Root extends Component {
render() {
return (
<div>
<Provider store={store}>
{() => <CounterApp />}
</Provider>
<DebugPanel top right bottom key="debugPanel">
<DebugPanel top right bottom>
<DevTools store={store} monitor={LogMonitor} />
</DebugPanel>
</div>
Expand Down

1 comment on commit 4670a82

@qnm
Copy link

@qnm qnm commented on 4670a82 Aug 23, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Please # to comment.