wip

Author: bethrezen

app/assets/bundle/app/DevTools.js

@@ -0,0 +1,23 @@
+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-q'
+               defaultIsVisible={true}>
+    <LogMonitor theme='tomorrow' />
+  </DockMonitor>
+);
+
+export default DevTools;

app/assets/bundle/app/index.js

@@ -27,8 +27,8 @@ import history from './history';
 import i18next from 'i18next';
 import XHR from 'i18next-xhr-backend';
 import LngDetector from 'i18next-browser-languagedetector';
-
 import App from './App';
+import DevTools from './DevTools';
 // Build the middleware for intercepting and dispatching navigation actions
 
 const Provider = ReactRedux.Provider;
@@ -51,6 +51,7 @@ class CRM extends React.Component {
           <JssProvider generateClassName={createGenerateClassName()}>
             <MuiThemeProvider theme={MuiTheme}>
               <App history={history} store={store} />
+              <DevTools />
             </MuiThemeProvider>
           </JssProvider>
         </ConnectedRouter>

app/assets/bundle/app/reducers.js

@@ -34,13 +34,18 @@ export {
 // import {ApiTableReducer} from './ApiTable/reducers';
 
 export default function createReducer(asyncReducers = {}) {
+  console.log('createReducer', asyncReducers);
   const reducers = {
     router: routerReducer,
     // apiTable: ApiTableReducer,
     LoadedModules,
     form,
+    bar: (state={}, ...args) => {
+      console.log('bar', state, args);
+      return state;
+    },
     ...asyncReducers
   };
-  console.log('!reducers', reducers);
-  return combineReducers(reducers, {});
+  console.log(reducers);
+  return combineReducers(reducers);
 }

app/assets/bundle/app/store.js

@@ -1,25 +1,39 @@
-import { createStore, applyMiddleware } from 'redux';
+import { createStore, applyMiddleware, compose } from 'redux';
 import createReducer from './reducers';
 import ReduxThunk from 'redux-thunk';
 import {composeWithDevTools} from 'redux-devtools-extension';
 import { connectRouter, routerMiddleware } from 'connected-react-router';
 import history from './history';
+import DevTools from './DevTools';
+
 
 const ReactRouterMiddleware = routerMiddleware(history);
 const composeEnhancers = composeWithDevTools({
   // options like actionSanitizer, stateSanitizer
 });
 
-export default function configureStore(initialState = {}) {
+export const loggerMiddleware = store => next => action => {
+  console.group(action.type);  // eslint-disable-line no-console
+  console.info('dispatching', action);  // eslint-disable-line no-console
+  const result = next(action);
+  // OMIT toJS if you're not using immutable
+  console.log('next state', store.getState()); // eslint-disable-line no-console
+  console.groupEnd(action.type); // eslint-disable-line no-console
+  return result;
+};
 
+const monitorReducer = (state = {}, action) => state;
 
+export default function configureStore(initialState = {}) {
   const store = createStore(
     connectRouter(history)(createReducer()),
     initialState,
-    composeEnhancers(
+    compose(
       applyMiddleware(ReactRouterMiddleware),
       applyMiddleware(ReduxThunk),
-      // applyMiddleware(logger),
+      applyMiddleware(loggerMiddleware),
+      DevTools.instrument(),
+      // instrument(monitorReducer, { maxAge: 50 })
     )
   );
   store.asyncReducers = {};
@@ -29,8 +43,7 @@ export default function configureStore(initialState = {}) {
 export function injectAsyncReducer(store, name, asyncReducer) {
 
   store.asyncReducers[name] = asyncReducer;
-  const reducers = createReducer(store.asyncReducers);
-  console.log('reducers', reducers);
+  const reducers = connectRouter(history)(createReducer(store.asyncReducers));
   store.replaceReducer(reducers);
 
 }