From c567bb2d7265c242114a89583d9d4e0fe66e3613 Mon Sep 17 00:00:00 2001
From: Rob Sharp <qnm@fea.st>
Date: Fri, 21 Aug 2015 09:24:46 +1000
Subject: [PATCH] Improve installation instructions by adding examples and note
 on middleware ordering

---
 README.md | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/README.md b/README.md
index c27d50b4..ea32e345 100644
--- a/README.md
+++ b/README.md
@@ -21,6 +21,47 @@ A live-editing time travel environment for Redux.
 npm install --save-dev redux-devtools
 ```
 
+DevTools is a middleware, which should be added to your middleware stack *after* `applyMiddleware` because `applyMiddleware` is potentially asynchronous. Otherwise, DevTools won't see the raw actions emitted by the Promise middleware etc.
+
+To install, firstly import `devTools` into your App container:
+```
+import { devTools, persistState } from 'redux-devtools';
+import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
+```
+
+Then, add `devTools` to your middleware, and create your store:
+```
+const finalCreateStore = compose(
+  applyMiddleware(thunk),
+  devTools(),
+  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 {
+  render() {
+    return (
+      <Provider store={store}>
+        {() => <CounterApp />}
+      </Provider>
+      <div>
+        <Provider store={store}>
+          {() => <CounterApp />}
+        </Provider>
+        <DebugPanel top right bottom key="debugPanel">
+          <DevTools store={store} monitor={LogMonitor} />
+        </DebugPanel>
+      </div>
+    );
+  }
+}
+```
+
 [This commit](https://github.com/gaearon/redux-devtools/commit/0a2a97556e252bfad822ca438923774bc8b932a4) should give you an idea about how to add Redux DevTools for your app **but 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.)
 
 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/compare/66bf63fb0f23a3c264a5d37c3acb4c047bf0c0c9...c6515236a1def8a3d2bfeb8f6cd6f0ccdb2f9e1b) of adding React DevTools to a project handling the production case correctly.