Add redux dev tools (ctrl+h to show)

package.json

@@ -81,6 +81,9 @@
     "postcss-url": "^5.1.1",
     "raw-loader": "^0.5.1",
     "react-addons-test-utils": "^15.0.2",
+    "redux-devtools": "^3.3.1",
+    "redux-devtools-dock-monitor": "^1.1.1",
+    "redux-devtools-log-monitor": "^1.0.11",
     "sass-loader": "^3.1.2",
     "sinon": "^1.15.3",
     "style-loader": "^0.13.0",

src/containers/DevTools.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+// Exported from redux-devtools
+import { createDevTools } from 'redux-devtools';
+
+// Monitors are separate packages, and you can make a custom one
+import LogMonitor from 'redux-devtools-log-monitor';
+import DockMonitor from 'redux-devtools-dock-monitor';
+
+// createDevTools takes a monitor and produces a DevTools component
+const DevTools = createDevTools(
+    // Monitors are individually adjustable with props.
+    // Consult their repositories to learn about those props.
+    // Here, we put LogMonitor inside a DockMonitor.
+    // Note: DockMonitor is visible by default.
+    <DockMonitor toggleVisibilityKey="ctrl-h"
+        changePositionKey="ctrl-d"
+        defaultIsVisible={false}
+    >
+        <LogMonitor theme="tomorrow" />
+    </DockMonitor>
+);
+
+export default DevTools;

src/index.js

@@ -3,39 +3,20 @@ import 'polyfills';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { createStore, combineReducers, applyMiddleware } from 'redux';
 import { Provider as ReduxProvider } from 'react-redux';
-
-// midleware, который позволяет возвращать из экшенов функции
-// это полезно для работы с асинхронными действиями,
-// а также дает возможность проверить какие-либо условия перед запуском экшена
-// или даже вообще его не запускать в зависимости от условий
-import thunk from 'redux-thunk';
-
 import { Router, browserHistory } from 'react-router';
-import { syncHistory, routeReducer } from 'react-router-redux';
 
 import { factory as userFactory } from 'components/user/factory';
 import { IntlProvider } from 'components/i18n';
-import reducers from 'reducers';
 import routesFactory from 'routes';
+import storeFactory from 'storeFactory';
 
-const reducer = combineReducers({
+const store = storeFactory();
-    ...reducers,
-    routing: routeReducer
-});
-
-const reduxRouterMiddleware = syncHistory(browserHistory);
-
-const store = applyMiddleware(
-    reduxRouterMiddleware,
-    thunk
-)(createStore)(reducer);
 
 userFactory(store)
 .then(() => {
     // allow :active styles in mobile Safary
-    document.addEventListener("touchstart", () => {}, true);
+    document.addEventListener('touchstart', () => {}, true);
 
     ReactDOM.render(
         <ReduxProvider store={store}>
@@ -50,7 +31,6 @@ userFactory(store)
         </ReduxProvider>,
         document.getElementById('app')
     );
-
 });
 
 import scrollTo from 'components/ui/scrollTo';

src/pages/root/RootPage.jsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 
 import Userbar from 'components/userbar/Userbar';
 import PopupStack from 'components/ui/popup/PopupStack';
+import DevTools from 'containers/DevTools';
 
 import styles from './root.scss';
 
@@ -14,6 +15,7 @@ import messages from './RootPage.intl.json';
 function RootPage(props) {
     const isRegisterPage = props.location.pathname === '/register';
 
+    /* global process: false */
     return (
         <div className={styles.root}>
             <div id="view-port" className={classNames(styles.viewPort, {
@@ -37,6 +39,7 @@ function RootPage(props) {
                 </div>
             </div>
             <PopupStack />
+            {process.env.NODE_ENV === 'production' ? null : <DevTools /> }
         </div>
     );
 }

src/reducers.js

@@ -1,11 +1,16 @@
+import { combineReducers } from 'redux';
+
+import { routeReducer } from 'react-router-redux';
+
 import auth from 'components/auth/reducer';
 import user from 'components/user/reducer';
 import i18n from 'components/i18n/reducer';
 import popup from 'components/ui/popup/reducer';
 
-export default {
+export default combineReducers({
     auth,
     user,
     i18n,
-    popup
+    popup,
-};
+    routing: routeReducer
+});

src/storeFactory.js

@@ -0,0 +1,38 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+// midleware, который позволяет возвращать из экшенов функции
+// это полезно для работы с асинхронными действиями,
+// а также дает возможность проверить какие-либо условия перед запуском экшена
+// или даже вообще его не запускать в зависимости от условий
+import thunk from 'redux-thunk';
+import { syncHistory } from 'react-router-redux';
+import { browserHistory } from 'react-router';
+
+import reducers from 'reducers';
+import DevTools from 'containers/DevTools';
+
+export default function storeFactory() {
+    const reduxRouterMiddleware = syncHistory(browserHistory);
+    const middlewares = applyMiddleware(
+        reduxRouterMiddleware,
+        thunk
+    );
+
+    /* global process: false */
+    let enhancer;
+    if (process.env.NODE_ENV === 'production') {
+        enhancer = compose(middlewares);
+    } else {
+        enhancer = compose(middlewares, DevTools.instrument());
+    }
+
+    const store = createStore(reducers, {}, enhancer);
+
+    // Hot reload reducers
+    if (module.hot) {
+        module.hot.accept('reducers', () =>
+            store.replaceReducer(require('reducers').default)
+        );
+    }
+
+    return store;
+}