From dbe7f43cf2568383388f0007e9e0ddab638e63ba Mon Sep 17 00:00:00 2001
From: Yuki Kodama <endflow.net@gmail.com>
Date: Fri, 13 May 2016 13:37:04 +0900
Subject: [PATCH] Use redux-devtools instead of redux-logger

---
 package.json          |  3 +++
 throttle/dev-tools.js | 12 ++++++++++++
 throttle/index.js     |  6 +++++-
 throttle/store.js     |  9 +++++----
 4 files changed, 25 insertions(+), 5 deletions(-)
 create mode 100644 throttle/dev-tools.js

diff --git a/package.json b/package.json
index dd122a4..cc02c85 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,9 @@
     "react-redux": "^4.4.5",
     "redux": "^3.5.2",
     "redux-actions": "^0.9.1",
+    "redux-devtools": "^3.3.1",
+    "redux-devtools-dock-monitor": "^1.1.1",
+    "redux-devtools-log-monitor": "^1.0.11",
     "redux-logger": "^2.6.1",
     "redux-saga": "^0.10.4",
     "webpack": "^1.13.0",
diff --git a/throttle/dev-tools.js b/throttle/dev-tools.js
new file mode 100644
index 0000000..b8bace9
--- /dev/null
+++ b/throttle/dev-tools.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { createDevTools } from 'redux-devtools';
+import LogMonitor from 'redux-devtools-log-monitor';
+import DockMonitor from 'redux-devtools-dock-monitor';
+
+const DevTools = createDevTools(
+  <DockMonitor toggleVisibilityKey='ctrl-h' changePositionKey='ctrl-q'>
+    <LogMonitor theme='tomorrow' />
+  </DockMonitor>
+);
+
+export default DevTools;
diff --git a/throttle/index.js b/throttle/index.js
index 4f3cf53..0906f00 100644
--- a/throttle/index.js
+++ b/throttle/index.js
@@ -3,10 +3,14 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import App from './app';
+import DevTools from './dev-tools';
 import configureStore from './store';
 
 ReactDOM.render(
   <Provider store={configureStore()}>
-    <App />
+    <div>
+      <App />
+      <DevTools />
+    </div>
   </Provider>,
 document.getElementById('container'));
diff --git a/throttle/store.js b/throttle/store.js
index 52040fd..0a07ef3 100644
--- a/throttle/store.js
+++ b/throttle/store.js
@@ -1,16 +1,17 @@
-import { createStore, applyMiddleware } from 'redux';
+import { createStore, applyMiddleware, compose } from 'redux';
 import createSagaMiddleware from 'redux-saga';
-import logger from 'redux-logger';
 import reducer from './reducers';
 import rootSaga from './sagas';
+import DevTools from './dev-tools';
 
 export default function configureStore(initialState) {
   const sagaMiddleware = createSagaMiddleware();
   const store = createStore(
     reducer,
     initialState,
-    applyMiddleware(
-      sagaMiddleware, logger()
+    compose(
+      applyMiddleware(sagaMiddleware),
+      DevTools.instrument()
     )
   );
   sagaMiddleware.run(rootSaga);