Dev Tools

src/ts/@overflow/app/index.tsx

@@ -4,6 +4,7 @@ import { Provider, Store } from 'react-redux';
 import { ConnectedRouter } from 'react-router-redux';
 import createSagaMiddleware, { SagaMiddleware } from 'redux-saga';
 import { History } from 'history';
+import { AppContainer } from 'react-hot-loader';
 
 import * as injectTapEventPlugin from 'react-tap-event-plugin';
 
@@ -22,8 +23,7 @@ import App from './views/App';
 
 injectTapEventPlugin();
 
-const rpcURL = 'ws://127.0.0.1:18081/rpc';
-
+const isProduction:boolean = process.env.NODE_ENV === 'production' ? true : false;
 
 class Application {
   private config: Config;
@@ -41,9 +41,9 @@ class Application {
     this.history = history;
   }
 
-  public static async Run(): Promise<void> {
+  public static Run(): void {
     let application = new Application();
-    return application.start();
+    application.start();
   }
 
   private async start(): Promise<void> {
@@ -88,7 +88,11 @@ class Application {
     return rpcClient;
   }
 
-  private initSagaEffect(): Promise<void> {
+  private initRedux(): Promise<void> {
+    // state tree
+    // reducer
+    // middleware
+    //  saga
     const rpcClient = new Promise<void>(resolve => {
       this.sagaMiddleware.run(sagas);
       resolve();
@@ -97,6 +101,14 @@ class Application {
     return rpcClient;
   }
 
+  private initSagaEffect(): Promise<void> {
+    const rpcClient = new Promise<void>(resolve => {
+      this.sagaMiddleware.run(sagas);
+      resolve();
+    });
+
+    return rpcClient;
+  }
 
   private displayLoading(): void {
     ReactDOM.render(
@@ -132,6 +144,9 @@ class Application {
 
 
   private displayApp(): void {
+    isProduction ? this.displayProductionApp() : this.displayDebugApp();
+  }
+  private displayProductionApp(): void {
     ReactDOM.render(
       <Provider store={this.store}>
         <ConnectedRouter history={this.history}>
@@ -141,6 +156,38 @@ class Application {
       this.container,
     );
   }
+  private displayDebugApp(): void {
+    if (module.hot) {
+      // app
+      module.hot.accept('./views/App', async () => {
+        // const NextApp = require('./app').App;
+        const NextApp = (await import('./views/App')).default;
+        ReactDOM.render(
+          <AppContainer>
+            <Provider store={this.store}>
+              <ConnectedRouter history={this.history}>
+                <NextApp />
+              </ConnectedRouter>
+            </Provider>
+          </AppContainer>
+          ,
+          this.container,
+        );
+      });
+    }
+
+    ReactDOM.render(
+      <AppContainer>
+        <Provider store={this.store}>
+          <ConnectedRouter history={this.history}>
+            <App />
+          </ConnectedRouter>
+        </Provider>
+      </AppContainer>
+      ,
+      this.container,
+    );
+  }
 
 }
 

src/ts/@overflow/app/redux/store.ts

@@ -1,19 +1,45 @@
-import { applyMiddleware, compose, createStore, Store } from 'redux';
+import {
+  applyMiddleware,
+  compose,
+  createStore,
+  Store,
+} from 'redux';
 import { routerMiddleware } from 'react-router-redux';
-import createSagaMiddleware, { SagaMiddleware } from 'redux-saga';
-import { createHashHistory, History } from 'history';
+import createSagaMiddleware, {
+  SagaMiddleware,
+} from 'redux-saga';
 
+import {
+  createHashHistory,
+  History,
+} from 'history';
+
+import {
+  EnhancerOptions,
+  composeWithDevTools,
+} from 'redux-devtools-extension/logOnlyInProduction';
+
+import reduxLogger from 'redux-logger';
 
 import reducer from './reducer';
 import State from './state';
 
+const useReduxDevTools = window.devToolsExtension && process.env.NODE_ENV !== 'production' ? true : false;
+
+
 const history = createHashHistory();
 const sagaMiddleware: SagaMiddleware<any> = createSagaMiddleware();
 const middlewares = [sagaMiddleware, routerMiddleware(history)];
 
 const store: Store<State> = createStore<State>(
     reducer,
-    applyMiddleware(...middlewares),
+    useReduxDevTools ?
+      compose(
+        applyMiddleware(...middlewares),
+        window.devToolsExtension(),
+      )
+      :
+      applyMiddleware(...middlewares),
 );
 
 export {