Explicit > implicit

Author: gaearon

examples/counter/src/containers/DevTools.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createDevTools } from 'redux-devtools';
+import createLogMonitor from 'redux-devtools-log-monitor';
+import createDockMonitor from '../dock/DockMonitor';
+
+export default createDevTools(
+  createDockMonitor(
+    createLogMonitor()
+  )
+);

examples/counter/src/containers/Root.dev.js

@@ -1,24 +1,18 @@
 import React, { Component } from 'react';
 import { Provider } from 'react-redux';
-import { DevToolsProvider } from 'redux-devtools';
 import CounterApp from './CounterApp';
-import LogMonitor from 'redux-devtools-log-monitor';
-import DockMonitor from '../dock/DockMonitor';
+import DevTools from './DevTools';
 
 export default class Root extends Component {
   render() {
     const { store } = this.props;
     return (
-      <div>
-        <Provider store={store}>
+      <Provider store={store}>
+        <div>
           <CounterApp />
-        </Provider>
-        <DevToolsProvider store={store}>
-          <DockMonitor>
-            <LogMonitor />
-          </DockMonitor>
-        </DevToolsProvider>
-      </div>
+          <DevTools />
+        </div>
+      </Provider>
     );
   }
 }

examples/counter/src/dock/DockMonitor.js

@@ -4,65 +4,23 @@
 
 import React, { Component, PropTypes } from 'react';
 import Dock from 'react-dock';
-import MapProvider from './MapProvider';
 import { connect } from 'react-redux';
-import { combineReducers } from 'redux';
-
-const TOGGLE_VISIBILITY = '@@redux-devtools/dock/TOGGLE_VISIBILITY';
-function toggleVisibility() {
-  return { type: TOGGLE_VISIBILITY };
-}
-
-const CHANGE_POSITION = '@@redux-devtools/dock/CHANGE_POSITION';
-function changePosition() {
-  return { type: CHANGE_POSITION };
-}
+import { combineReducers, bindActionCreators } from 'redux';
 
 const POSITIONS = ['left', 'top', 'right', 'bottom'];
 
-function wrapReducer(options = {}) {
-  const {
-    isVisible: initialIsVisible = true,
-    position: initialPosition = 'right'
-  } = options;
-
-  function position(state = initialPosition, action) {
-    return (action.type === CHANGE_POSITION) ?
-      POSITIONS[(POSITIONS.indexOf(state) + 1) % POSITIONS.length] :
-      state;
-  }
-
-  function isVisible(state = initialIsVisible, action) {
-    return (action.type === TOGGLE_VISIBILITY) ?
-      !state :
-      state;
-  }
-
-  return childMonitorReducer => combineReducers({
-    childMonitorState: childMonitorReducer,
-    position,
-    isVisible
-  });
-}
-
-function mapUpstreamStateToDownstreamState(state) {
-  return {
-    devToolsState: state.devToolsState,
-    monitorState: state.monitorState.childMonitorState
-  };
-}
-
-@connect(
-  state => state.monitorState,
-  { toggleVisibility, changePosition }
-)
-export default class DockMonitor extends Component {
+class DockMonitor extends Component {
   static propTypes = {
-    position: PropTypes.oneOf(['left', 'top', 'right', 'bottom']).isRequired,
-    isVisible: PropTypes.bool.isRequired,
-    childMonitorState: PropTypes.any,
-    toggleVisibility: PropTypes.func.isRequired,
-    changePosition: PropTypes.func.isRequired
+    monitorState: PropTypes.shape({
+      position: PropTypes.oneOf(POSITIONS).isRequired,
+      isVisible: PropTypes.bool.isRequired,
+      childState: PropTypes.any
+    }).isRequired,
+
+    monitorActions: PropTypes.shape({
+      toggleVisibility: PropTypes.func.isRequired,
+      changePosition: PropTypes.func.isRequired
+    }).isRequired
   };
 
   componentDidMount() {
@@ -84,28 +42,86 @@ export default class DockMonitor extends Component {
     const char = String.fromCharCode(key);
     switch (char) {
     case 'H':
-      this.props.toggleVisibility();
+      this.props.monitorActions.toggleVisibility();
       break;
     case 'D':
-      this.props.changePosition();
+      this.props.monitorActions.changePosition();
       break;
     default:
       break;
     }
   }
 
   render() {
-    const { position, isVisible, children } = this.props;
+    const { children, monitorState } = this.props;
+    const { position, isVisible } = monitorState;
     return (
       <Dock position={position}
             isVisible={isVisible}
             dimMode='none'>
-        <MapProvider mapState={mapUpstreamStateToDownstreamState}>
-          {children}
-        </MapProvider>
+        {children}
       </Dock>
     );
   }
 }
 
-DockMonitor.wrapReducer = wrapReducer;
+const TOGGLE_VISIBILITY = '@@redux-devtools/dock/TOGGLE_VISIBILITY';
+function toggleVisibility() {
+  return { type: TOGGLE_VISIBILITY };
+}
+
+const CHANGE_POSITION = '@@redux-devtools/dock/CHANGE_POSITION';
+function changePosition() {
+  return { type: CHANGE_POSITION };
+}
+
+export default function create(ChildMonitor, {
+  defaultIsVisible = true,
+  defaultPosition = 'right'
+} = {}) {
+  function position(state = defaultPosition, action) {
+    return (action.type === CHANGE_POSITION) ?
+      POSITIONS[(POSITIONS.indexOf(state) + 1) % POSITIONS.length] :
+      state;
+  }
+
+  function isVisible(state = defaultIsVisible, action) {
+    return (action.type === TOGGLE_VISIBILITY) ?
+      !state :
+      state;
+  }
+
+  function getChildStore(store) {
+    return {
+      ...store,
+      getState() {
+        const state = store.getState();
+        return {
+          ...state,
+          monitorState: state.monitorState.childState
+        };
+      }
+    };
+  }
+
+  const Monitor = connect(
+    state => state,
+    dispatch => ({
+      monitorActions: bindActionCreators({ toggleVisibility, changePosition }, dispatch)
+    })
+  )(DockMonitor);
+
+  const CompositeMonitor = ({ store }) => (
+    <Monitor store={store}>
+      <ChildMonitor store={getChildStore(store)} />
+    </Monitor>
+  );
+
+  CompositeMonitor.reducer = combineReducers({
+    childState: ChildMonitor.reducer,
+    position,
+    isVisible
+  });
+
+  return CompositeMonitor;
+}

examples/counter/src/dock/MapProvider.js

@@ -1,23 +1,12 @@
 import { createStore, applyMiddleware, compose } from 'redux';
-import devTools, { persistState } from 'redux-devtools';
+import { persistState } from 'redux-devtools';
 import thunk from 'redux-thunk';
 import rootReducer from '../reducers';
-import DockMonitor from '../dock/DockMonitor';
-import LogMonitor from 'redux-devtools-log-monitor';
+import DevTools from '../containers/DevTools';
 
 const finalCreateStore = compose(
-  applyMiddleware(
-    thunk
-  ),
-  devTools(
-    LogMonitor.createReducer({
-      preserveScrollTop: true
-    }),
-    DockMonitor.wrapReducer({
-      position: 'right',
-      isVisible: true
-    })
-  ),
+  applyMiddleware(thunk),
+  DevTools.enhance,
   persistState(
     window.location.href.match(
       /[?&]debug_session=([^&]+)\b/

examples/counter/src/store/configureStore.dev.js

@@ -0,0 +1,17 @@
+import React, { cloneElement, Component, PropTypes } from 'react';
+import enhance from './enhance';
+
+export default function createDevTools(Monitor) {
+  return class DevTools extends Component {
+    static contextTypes = {
+      store: PropTypes.object.isRequired
+    };
+
+    static enhance = enhance(Monitor.reducer);
+
+    render() {
+      return <Monitor store={this.context.store.devToolsStore} />;
+    }
+  }
+}
+

src/DevToolsProvider.js

@@ -264,18 +264,11 @@ export const ActionCreators = {
 /**
  * Redux DevTools store enhancer.
  */
-export default function devTools(
-  monitorReducer = () => null,
-  ...monitorReducerWrappers
-) {
+export default function enhance(monitorReducer = () => null) {
   return next => (reducer, initialState) => {
-    const finalMonitorReducer = compose(
-      ...monitorReducerWrappers.slice().reverse()
-    )(monitorReducer);
-
     const wrapReducer = (r) => combineReducers({
       devToolsState: createDevToolsStateReducer(r, initialState),
-      monitorState: finalMonitorReducer
+      monitorState: monitorReducer
     });
 
     const devToolsStore = next(wrapReducer(reducer));

src/createDevTools.js

@@ -1,3 +1,3 @@
-export { default, ActionCreators, ActionTypes } from './devTools';
-export { default as DevToolsProvider } from './DevToolsProvider';
+export { default, ActionCreators, ActionTypes } from './enhance';
 export { default as persistState } from './persistState';
+export { default as createDevTools } from './createDevTools';