fix(Redux): Allow Visualizer to be embedded inside another redux app

src/app.js

@@ -5,53 +5,21 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import network from './network';
+import setup from './setup';
 import MainView from './MainView';
-
-import { store, dispatch, actions } from './redux';
-import behaviorOnChange from './behavior';
+import { getActiveStore } from './redux';
 
 require('normalize.css');
 
 function start() {
   setImmediate(() => {
-    // Keep track of any server notification
-    network.getClient().session.subscribe('pv.time.change', (args) => {
-      const index = args[0].timeStep;
-      setImmediate(() => {
-        dispatch(actions.time.storeTime(index));
-        const state = store.getState();
-        if (state.active.source && state.active.source !== '0') {
-          // Update proxy data for info tab...
-          // FIXME implement a lighter implementation on the server side...
-          dispatch(actions.proxies.fetchProxy(state.active.source));
-        }
-      });
-    });
-
-    // Fetch data
-    dispatch(actions.proxies.fetchPipeline());
-    dispatch(actions.proxies.fetchAvailableProxies());
-    dispatch(actions.proxies.fetchSettingProxy());
-    dispatch(actions.time.fetchTime());
-    dispatch(actions.files.fetchServerDirectory('.'));
-
-    // Fetch heavy data after full initialization
-    setTimeout(() => {
-      dispatch(actions.colors.fetchColorMapImages());
-    }, 2000);
-
-
-    // Attach default behavior
-    store.subscribe(() => {
-      const state = store.getState();
-      behaviorOnChange(state, dispatch);
-    });
+    setup(network.getClient().session);
   });
 
   // Mount UI
   const container = document.querySelector('.content');
   ReactDOM.unmountComponentAtNode(container);
-  ReactDOM.render(<Provider store={store}><MainView /></Provider>, container);
+  ReactDOM.render(<Provider store={getActiveStore()}><MainView /></Provider>, container);
 }
 
 export function connect(config = {}) {

src/redux/index.js

@@ -6,14 +6,20 @@ import selectors from './selectors';
 
 export { actions, reducers, selectors };
 
-export const store = createStore(reducers);
+let activeStore = createStore(reducers);
 
 export function dispatch(action) {
   var currentAction = action;
   while (typeof currentAction === 'function') {
-    currentAction = action(dispatch, store.getState);
+    currentAction = action(dispatch, activeStore.getState);
   }
-  return store.dispatch(currentAction);
+  return activeStore.dispatch(currentAction);
 }
 
-export default store;
+export function setVisualizerActiveStore(otherStore) {
+  activeStore = otherStore;
+}
+
+export function getActiveStore() {
+  return activeStore;
+}

src/setup.js

@@ -0,0 +1,37 @@
+import { getActiveStore, dispatch, actions } from './redux';
+import behaviorOnChange from './behavior';
+
+export default function setup(session) {
+  // Keep track of any server notification
+  session.subscribe('pv.time.change', (args) => {
+    const index = args[0].timeStep;
+    setImmediate(() => {
+      dispatch(actions.time.storeTime(index));
+      const state = getActiveStore().getState();
+      if (state.active.source && state.active.source !== '0') {
+        // Update proxy data for info tab...
+        // FIXME implement a lighter implementation on the server side...
+        dispatch(actions.proxies.fetchProxy(state.active.source));
+      }
+    });
+  });
+
+  // Fetch data
+  dispatch(actions.proxies.fetchPipeline());
+  dispatch(actions.proxies.fetchAvailableProxies());
+  dispatch(actions.proxies.fetchSettingProxy());
+  dispatch(actions.time.fetchTime());
+  dispatch(actions.files.fetchServerDirectory('.'));
+
+  // Fetch heavy data after full initialization
+  setTimeout(() => {
+    dispatch(actions.colors.fetchColorMapImages());
+  }, 2000);
+
+
+  // Attach default behavior
+  getActiveStore().subscribe(() => {
+    const state = getActiveStore().getState();
+    behaviorOnChange(state, dispatch);
+  });
+}