Devtools in counter example

wbuchwalter · wbuchwalter · commit 2b705026cb1f · 2015-09-17T21:52:37.000-04:00
diff --git a/examples/counter/containers/App.ts b/examples/counter/containers/App.ts
@@ -18,13 +18,15 @@ import { Inject } from 'angular2/di';
     [increment-If-Odd]="incrementIfOdd"
     [increment-Async]="incrementAsync">
   </counter>
+  <dev
   `
 })
 export default class App {
 
   protected unsubscribe: Function;
 
-  constructor( @Inject('ngRedux') ngRedux) {
+  constructor( @Inject('ngRedux') ngRedux, @Inject('devTools') devTools) {
+    devTools.start(ngRedux);
     this.unsubscribe = ngRedux.connect(this.mapState, this.mapDispatch)(this);
   }
 
diff --git a/examples/counter/devTools.js b/examples/counter/devTools.js
@@ -0,0 +1,33 @@
+import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
+import React, { Component } from 'react';
+import {bind} from 'angular2/di';
+
+let devTools = bind('devTools').toFactory(() => {
+    return {
+      start: (ngRedux) => {
+        startDevTools(ngRedux);
+      }
+    };
+  });
+
+export default devTools;
+
+function startDevTools(ngRedux) {
+  React.render(
+    <DevToolsReactComponent store={ ngRedux }/>,
+    document.getElementById('devTools')
+  );
+}
+
+class DevToolsReactComponent extends Component {
+  render() {
+    return (
+      <div>
+        <DebugPanel top right bottom>
+          <DevTools store={ this.props.store } monitor = { LogMonitor } />
+        </DebugPanel>
+      </div>
+    );
+  }
+}
+
diff --git a/examples/counter/index.html b/examples/counter/index.html
@@ -7,6 +7,7 @@
   </head>
   <body>
     <root></root>
+    <div id="devTools"></div>
   </body>
   <script src="/static/bundle.js"></script>
 </html>
diff --git a/examples/counter/index.ts b/examples/counter/index.ts
@@ -3,10 +3,13 @@ import {bind} from 'angular2/di';
 import App from './containers/App';
 import configureStore from './store/configureStore';
 const provider = require('ng2-redux').provider;
-
+const devTools = require('./devTools');
 const store = configureStore();
 
 bootstrap(
   App,
-  [provider(store)]
-  );
+  [
+    provider(store),
+    devTools
+  ]
+);
diff --git a/examples/counter/package.json b/examples/counter/package.json
@@ -28,9 +28,10 @@
   "homepage": "https://github.com/gaearon/redux#readme",
   "dependencies": {
     "angular2": "2.0.0-alpha.30",
-    "ng2-redux": "2.0.0-alpha.2",
+    "ng2-redux": "2.0.0-alpha.3",
     "react": "^0.13.3",
-    "redux": "^1.0.0-rc",
+    "redux": "^3.0.0",
+    "redux-devtools": "^2.1.0",
     "redux-thunk": "^0.1.0",
     "reflect-metadata": "^0.1.0",
     "rtts_assert": "2.0.0-alpha.30",
diff --git a/examples/counter/store/configureStore.ts b/examples/counter/store/configureStore.ts
@@ -1,11 +1,13 @@
-import {createStore, applyMiddleware} from 'redux';
+import {createStore, applyMiddleware, compose} from 'redux';
 const thunk = require('redux-thunk');
 import reducer from '../reducers/index';
+const devTools = require('redux-devTools').devTools;
 
-const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
+const finalCreateStore = compose(
+  applyMiddleware(thunk),
+  devTools()
+)(createStore);
 
 export default () => {
-  const store = createStoreWithMiddleware(reducer);
-
-  return store;
+  return finalCreateStore(reducer);
 }
diff --git a/examples/counter/typings/redux/redux.d.ts b/examples/counter/typings/redux/redux.d.ts
@@ -44,6 +44,7 @@ declare module Redux {
     function bindActionCreators<T>(actionCreators: T, dispatch: Dispatch): T;
     function combineReducers(reducers: any): Reducer;
     function applyMiddleware(...middleware: Middleware[]): Function;
+    function compose<T extends Function>(...functions: Function[]): T;
 }
 
 declare module "redux" {
diff --git a/package.json b/package.json
@@ -29,7 +29,9 @@
     "mocha": "^2.2.5",
     "sinon": "^1.16.1",
     "webpack": "^1.10.5",
-    "angular2": "^2.0.0-alpha.30"
+    "angular2": "^2.0.0-alpha.30",
+    "react": "^0.13.3",
+    "redux-devtools": "^2.1.0"
   },
   "peerDependencies": {
     "redux": "^2.0.0 || ^3.0.0",

Original file line number	Diff line number	Diff line change
`@@ -18,13 +18,15 @@ import { Inject } from 'angular2/di';`
`18`	`18`	`[increment-If-Odd]="incrementIfOdd"`
`19`	`19`	`[increment-Async]="incrementAsync">`
`20`	`20`	`</counter>`
	`21`	`+ <dev`
`21`	`22`	`
`22`	`23`	`})`
`23`	`24`	`export default class App {`
`24`	`25`
`25`	`26`	`protected unsubscribe: Function;`
`26`	`27`
`27`		`- constructor( @Inject('ngRedux') ngRedux) {`
	`28`	`+ constructor( @Inject('ngRedux') ngRedux, @Inject('devTools') devTools) {`
	`29`	`+ devTools.start(ngRedux);`
`28`	`30`	`this.unsubscribe = ngRedux.connect(this.mapState, this.mapDispatch)(this);`
`29`	`31`	`}`
`30`	`32`
Original file line number	Diff line number	Diff line change
`@@ -44,6 +44,7 @@ declare module Redux {`
`44`	`44`	`function bindActionCreators<T>(actionCreators: T, dispatch: Dispatch): T;`
`45`	`45`	`function combineReducers(reducers: any): Reducer;`
`46`	`46`	`function applyMiddleware(...middleware: Middleware[]): Function;`
	`47`	`+ function compose<T extends Function>(...functions: Function[]): T;`
`47`	`48`	`}`
`48`	`49`
`49`	`50`	`declare module "redux" {`