Update README.md

wbuchwalter · wbuchwalter · commit 2ee6b0fbc5b5 · 2015-08-25T23:41:05.000-04:00
diff --git a/README.md b/README.md
@@ -17,6 +17,7 @@ For Angular 2 see [ng2-redux](https://github.com/wbuchwalter/ng2-redux).
 - [Installation](#installation)
 - [Quick Start](#quick-start)
 - [API](#api)
+- [Using DevTools](#using-devtools)
 
 ## Installation
 ```js
@@ -84,9 +85,58 @@ Connects an Angular component to Redux.
 If `$scope` is passed to `connect` as `target`, ngRedux will listen to the `$destroy` event and unsubscribe the change listener when it is triggered, you don't need to keep track of your subscribtions in this case.
 If anything else than `$scope` is passed as target, the responsability to unsubscribe correctly is deferred to the user.
 
-## Store API
+### Store API
 All of redux's store methods (i.e. `dispatch`, `subscribe` and `getState`) are exposed by $ngRedux and can be accessed directly. For example:
 
 ```JS
 redux.bindActionCreators(actionCreator, $ngRedux.dispatch);
 ```
+
+
+## Using DevTools
+In order to use Redux DevTools with your angular app, you need to install [react](https://www.npmjs.com/package/react), [react-redux](https://www.npmjs.com/package/react-redux) and [redux-devtools](https://www.npmjs.com/package/redux-devtools) as development dependencies.
+
+```JS
+[...]
+import { devTools, persistState } from 'redux-devtools';
+import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
+import React, { Component } from 'react';
+
+angular.module('app', ['ngRedux'])
+  .config(($ngReduxProvider) => {
+      $ngReduxProvider.createStoreWith(rootReducer, [thunk], [devTools()]);
+    })
+  .run(($ngRedux, $rootScope) => {
+    React.render(
+      <App store={ $ngRedux }/>,
+      document.getElementById('devTools')
+    );
+    
+    //To reflect state changes when disabling/enabling actions via the monitor
+    //there is probably a smarter way to achieve that
+    $ngRedux.subscribe(_ => {
+        setTimeout($rootScope.$apply, 100);
+    });
+  });
+  
+  class App extends Component {
+  render() {
+    return (
+      <div>
+        <DebugPanel top right bottom>
+          <DevTools store={ this.props.store } monitor = { LogMonitor } />
+        </DebugPanel>
+      </div>
+    );
+  }
+}
+```
+
+```HTML
+<body>
+    <div ng-app='app'>
+      [...]
+    </div>
+    <div id="devTools"></div>
+</body>
+```
