keep store on main process, forward actions via IPC

app/main/index.development.js → app/main/createMainWindow.js

@@ -1,19 +1,19 @@
-import { app, BrowserWindow, Menu, crashReporter, shell } from 'electron';
+import { app, BrowserWindow, Menu } from 'electron';
 
-let menu;
-let template;
-let mainWindow = null;
 
-if (process.env.NODE_ENV === 'development') {
-  require('electron-debug')();
-}
+export default function createWindow(store) {
+  let menu;
+  let template;
 
-function createWindow() {
-  mainWindow = new BrowserWindow({
+  const mainWindow = new BrowserWindow({
     show: false,
     width: 1024,
     height: 728
   });
+
+  // set main redux store
+  mainWindow.initialState = store.getState();
+
   mainWindow.maximize();
 
   mainWindow.loadURL(`file://${__dirname}/../renderer/app.html`);
@@ -23,10 +23,6 @@ function createWindow() {
     mainWindow.focus();
   });
 
-  mainWindow.on('closed', () => {
-    mainWindow = null;
-  });
-
   if (process.env.NODE_ENV === 'development') {
     mainWindow.openDevTools();
   }
@@ -230,20 +226,6 @@ function createWindow() {
     menu = Menu.buildFromTemplate(template);
     mainWindow.setMenu(menu);
   }
-}
-
-
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') app.quit();
-});
-
-app.on('activate', () => {
-  // On OS X it's common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
-  if (mainWindow === null) {
-    createWindow();
-  }
-});
-
 
-app.on('ready', createWindow);
+  return mainWindow;
+}

app/main/index.js

@@ -0,0 +1,36 @@
+import { app, ipcMain } from 'electron';
+import createMainWindow from './createMainWindow';
+import configureStore from '../shared/store/configureStore';
+
+const store = configureStore(undefined, 'main');
+let mainWindow = null;
+
+if (process.env.NODE_ENV === 'development') {
+  require('electron-debug')();
+}
+
+function doCreateMainWindow() {
+  mainWindow = createMainWindow(store);
+  mainWindow.on('closed', () => {
+    mainWindow = null;
+  });
+}
+
+
+ipcMain.on('redux-action', (event, payload) => {
+  store.dispatch(payload);
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') app.quit();
+});
+
+app.on('activate', () => {
+  // On OS X it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    doCreateMainWindow();
+  }
+});
+
+app.on('ready', doCreateMainWindow);

app/renderer/containers/JobsPage.js

@@ -1,7 +1,7 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import Jobs from '../components/Jobs';
-import * as JobActions from '../actions/job';
+import * as JobActions from '../../shared/actions/job';
 
 function mapStateToProps(state) {
   return {

app/renderer/index.js

@@ -1,15 +1,22 @@
+import { ipcRenderer, remote } from 'electron';
 import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { Router, hashHistory } from 'react-router';
 import { syncHistoryWithStore } from 'react-router-redux';
 import routes from './routes';
-import configureStore from './store/configureStore';
+import configureStore from '../shared/store/configureStore';
 import './app.global.css';
 
-const store = configureStore();
+const { initialState } = remote.getCurrentWindow();
+
+const store = configureStore(initialState, 'renderer');
 const history = syncHistoryWithStore(hashHistory, store);
 
+ipcRenderer.on('redux-action', (event, payload) => {
+  store.dispatch(payload);
+});
+
 render(
   <Provider store={store}>
     <Router history={history} routes={routes} />

app/renderer/actions/job.js → app/shared/actions/job.js

@@ -9,6 +9,9 @@ export function startJob(time = new Date()) {
     payload: {
       time,
     },
+    meta: {
+      scope: 'main',
+    },
   };
 }
 
@@ -19,6 +22,9 @@ export function pauseJob(id, time = new Date()) {
       id,
       time,
     },
+    meta: {
+      scope: 'main',
+    },
   };
 }
 
@@ -29,5 +35,8 @@ export function stopJob(id, time = new Date()) {
       id,
       time,
     },
+    meta: {
+      scope: 'main',
+    },
   };
 }

app/shared/reducers/index.js

@@ -0,0 +1,17 @@
+import { combineReducers } from 'redux';
+import { routerReducer as routing } from 'react-router-redux';
+import job from './job';
+
+export default function getRootReducer(scope = 'main') {
+  let reducers = {
+    job,
+  };
+
+  if (scope === 'renderer') {
+    reducers = {
+      ...reducers,
+      routing,
+    };
+  }
+  return combineReducers({ ...reducers });
+}

app/shared/store/configureStore.development.js

@@ -0,0 +1,65 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import { persistState } from 'redux-devtools';
+import thunk from 'redux-thunk';
+import createLogger from 'redux-logger';
+import { hashHistory } from 'react-router';
+import { routerMiddleware } from 'react-router-redux';
+import getRootReducer from '../reducers';
+import forwardToMain from './middleware/forwardToMain';
+import forwardToRenderer from './middleware/forwardToRenderer';
+import DevTools from '../../renderer/containers/DevTools';
+
+export default function configureStore(initialState, scope = 'main') {
+  const logger = createLogger({
+    level: 'info',
+    collapsed: true,
+  });
+  const router = routerMiddleware(hashHistory);
+
+  let middleware = [
+    thunk,
+    logger,
+  ];
+
+  if (scope === 'renderer') {
+    middleware = [
+      forwardToMain,
+      router,
+      ...middleware,
+    ];
+  }
+  if (scope === 'main') {
+    middleware = [
+      ...middleware,
+      forwardToRenderer,
+    ];
+  }
+
+  let enhanced = [
+    applyMiddleware(...middleware),
+  ];
+
+  if (scope === 'renderer') {
+    enhanced = [
+      ...enhanced,
+      DevTools.instrument(),
+      persistState(
+        window.location.href.match(
+          /[?&]debug_session=([^&]+)\b/
+        )
+      ),
+    ];
+  }
+
+  const rootReducer = getRootReducer(scope);
+  const enhancer = compose(...enhanced);
+  const store = createStore(rootReducer, initialState, enhancer);
+
+  if (module.hot) {
+    module.hot.accept('../reducers', () => {
+      store.replaceReducer(require('../reducers'));
+    });
+  }
+
+  return store;
+}

app/shared/store/configureStore.production.js

@@ -0,0 +1,16 @@
+// see dev version!!!
+
+
+// import { createStore, applyMiddleware } from 'redux';
+// import thunk from 'redux-thunk';
+// import { hashHistory } from 'react-router';
+// import { routerMiddleware } from 'react-router-redux';
+// import rootReducer from '../reducers';
+//
+// const router = routerMiddleware(hashHistory);
+//
+// const enhancer = applyMiddleware(thunk, router);
+//
+// export default function configureStore(initialState) {
+//   return createStore(rootReducer, initialState, enhancer);
+// }

app/shared/store/middleware/forwardToMain.js

@@ -0,0 +1,14 @@
+import { ipcRenderer } from 'electron';
+
+const forwardToMain = store => next => action => {
+  if (action.meta && action.meta.scope && action.meta.scope === 'main') {
+    ipcRenderer.send('redux-action', action);
+
+    // stop action in-flight
+    return;
+  }
+
+  return next(action);
+};
+
+export default forwardToMain;

app/shared/store/middleware/forwardToRenderer.js

@@ -0,0 +1,20 @@
+import { ipcMain, BrowserWindow } from 'electron';
+
+const forwardToRenderer = store => next => action => {
+  // remove scope to avoid endless-loop
+  const rendererAction = Object.assign({}, action, {
+    meta: {
+      scope: 'renderer'
+    },
+  });
+
+  const openWindows = BrowserWindow.getAllWindows();
+  openWindows.forEach(({ webContents }) => {
+    webContents.send('redux-action', rendererAction);
+  });
+
+  // ipcMain.send('redux-action', rendererAction);
+  return next(action);
+};
+
+export default forwardToRenderer;

package.js

@@ -27,7 +27,7 @@ const DEFAULT_OPTS = {
     '^/test($|/)',
     '^/tools($|/)',
     '^/release($|/)',
-    '^/app/main/index.development.js'
+    '^/app/main/index.js'
   ].concat(devDeps.map(name => `/node_modules/${name}($|/)`))
   .concat(
     deps.filter(name => !electronCfg.externals.includes(name))

package.json

@@ -14,7 +14,7 @@
     "build-renderer": "cross-env NODE_ENV=production node -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.production.js --progress --profile --colors",
     "build": "npm run build-main && npm run build-renderer",
     "start": "cross-env NODE_ENV=production electron ./",
-    "start-hot": "cross-env HOT=1 NODE_ENV=development electron -r babel-register ./app/main/index.development",
+    "start-hot": "cross-env HOT=1 NODE_ENV=development electron -r babel-register ./app/main/index",
     "package": "cross-env NODE_ENV=production node -r babel-register package.js",
     "package-all": "npm run package -- --all",
     "postinstall": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json",

webpack.config.electron.js

@@ -6,7 +6,7 @@ export default {
 
   devtool: 'source-map',
 
-  entry: './app/main/index.development',
+  entry: './app/main/index',
 
   output: {
     path: __dirname,