Add Dispatcher

Author: zalmoxisus

src/app/containers/App.js

@@ -4,6 +4,7 @@ import styles from 'remotedev-app/lib/styles';
 import DevTools from 'remotedev-app/lib/containers/DevTools';
 import Instances from 'remotedev-app/lib/components/Instances';
 import Button from 'remotedev-app/lib/components/Button';
+import DispatcherButton from 'remotedev-app/lib/components/buttons/DispatcherButton';
 import ImportButton from 'remotedev-app/lib/components/buttons/ImportButton';
 import ExportButton from 'remotedev-app/lib/components/buttons/ExportButton';
 import SettingsIcon from 'react-icons/lib/md/settings';
@@ -20,7 +21,9 @@ export default class App extends Component {
     store: PropTypes.object
   };
 
-  static update = () => ({});
+  state = {
+    dispatcherIsOpen: false
+  };
 
   handleSelectInstance = e => {
     this.props.store.setInstance(e.target.value);
@@ -30,6 +33,10 @@ export default class App extends Component {
     sendToBg({ type: 'OPEN', position });
   };
 
+  toggleDispatcher = () => {
+    this.setState({ dispatcherIsOpen: !this.state.dispatcherIsOpen });
+  };
+
   render() {
     const { store } = this.props;
     const instances = store.instances;
@@ -42,6 +49,12 @@ export default class App extends Component {
           </div>
         }
         <DevTools monitor={monitor} store={store} key={`${monitor}-${store.instance}`} />
+        {this.state.dispatcherIsOpen &&
+          <DevTools monitor="DispatchMonitor"
+            store={store} dispatchFn={store.dispatch}
+            key={`Dispatch-${store.instance}`}
+          />
+        }
         <div style={styles.buttonBar}>
           {monitorPosition !== 'left' &&
             <Button
@@ -61,6 +74,9 @@ export default class App extends Component {
               onClick={() => { this.openWindow('bottom'); }}
             />
           }
+          <DispatcherButton
+            dispatcherIsOpen={this.state.dispatcherIsOpen} onClick={this.toggleDispatcher}
+          />
           <ImportButton importState={store.importState} />
           <ExportButton exportState={store.getState} />
           <Button

src/browser/extension/inject/contentScript.js

@@ -17,7 +17,7 @@ function connect(instance) {
   bg.onMessage.addListener((message) => {
     if (message.action) {
       window.postMessage({
-        type: 'DISPATCH',
+        type: message.type,
         payload: message.action,
         source: 'redux-cs'
       }, '*');

src/browser/extension/inject/pageScript.js

@@ -10,6 +10,7 @@ const monitorActions = [
 ];
 
 window.devToolsExtension = function(config = {}) {
+  let store;
   let liftedStore;
   if (!window.devToolsOptions) window.devToolsOptions = {};
 
@@ -78,6 +79,8 @@ window.devToolsExtension = function(config = {}) {
 
     if (message.type === 'DISPATCH') {
       liftedStore.dispatch(message.payload);
+    } else if (message.type === 'ACTION') {
+      store.dispatch(message.payload);
     } else if (message.type === 'IMPORT') {
       liftedStore.dispatch({
         type: 'IMPORT_STATE', nextLiftedState: jsan.parse(message.state)
@@ -172,7 +175,7 @@ window.devToolsExtension = function(config = {}) {
   function extEnhancer(next) {
     return (reducer, initialState, enhancer) => {
       init();
-      const store = next(reducer, initialState, enhancer);
+      store = next(reducer, initialState, enhancer);
       liftedStore = store.liftedStore;
       store.subscribe(() => {
         if (liftedStore !== store.liftedStore) liftedStore = store.liftedStore;