Persist app state

app/actions/setting.js

@@ -0,0 +1,14 @@
+export const TOGGLE_DEVTOOLS = 'TOGGLE_DEVTOOLS';
+export const RESIZE_DEVTOOLS = 'RESIZE_DEVTOOLS';
+
+export const toggleDevTools = name =>
+  ({
+    type: TOGGLE_DEVTOOLS,
+    name,
+  });
+
+export const resizeDevTools = size =>
+  ({
+    type: RESIZE_DEVTOOLS,
+    size,
+  });

app/containers/App.js

@@ -1,9 +1,10 @@
 import { ipcRenderer } from 'electron';
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import Dock from 'react-dock';
 import * as debuggerActions from '../actions/debugger';
+import * as settingActions from '../actions/setting';
 import Debugger from './Debugger';
 import ReduxDevTools from './ReduxDevTools';
 import ReactDevTools from './ReactDevTools';
@@ -56,19 +57,25 @@ const styles = {
 @connect(
   state => ({
     debugger: state.debugger,
+    setting: state.setting,
   }),
-  dispatch => bindActionCreators(debuggerActions, dispatch)
+  dispatch => ({
+    actions: {
+      debugger: bindActionCreators(debuggerActions, dispatch),
+      setting: bindActionCreators(settingActions, dispatch),
+    },
+  })
 )
 export default class App extends Component {
-  state = {
-    react: true,
-    redux: true,
-    size: 0.6,
+  static propTypes = {
+    setting: PropTypes.object.isRequired,
+    actions: PropTypes.object.isRequired,
   };
 
   componentDidMount() {
     ipcRenderer.on('toggle-devtools', (e, name) => {
-      this.setState({ [name]: !this.state[name] });
+      const { setting } = this.props.actions;
+      setting.toggleDevTools(name);
     });
   }
 
@@ -77,17 +84,16 @@ export default class App extends Component {
   }
 
   onReudxDockResize = size => {
-    if (!this.state.redux || !this.state.react) return;
-    if (size < 0.2) return this.setState({ size: 0.2 });
-    if (size > 0.8) return this.setState({ size: 0.8 });
-    this.setState({ size });
+    const { setting } = this.props.actions;
+    setting.resizeDevTools(size);
   };
 
   renderReduxDevTools() {
-    let size = this.state.size;
-    if (!this.state.redux) {
+    const { redux, react } = this.props.setting;
+    let { size } = this.props.setting;
+    if (!redux) {
       size = 0;
-    } else if (!this.state.react) {
+    } else if (!react) {
       size = 1;
     }
     return (
@@ -106,11 +112,12 @@ export default class App extends Component {
 
   renderReactDevTools() {
     const wrapStyle = Object.assign({}, styles.wrapReactPanel);
-    if (!this.state.react) {
+    const { redux, react, size } = this.props.setting;
+    if (!react) {
       wrapStyle.display = 'none';
     } else {
-      wrapStyle.height = this.state.redux ?
-        `${(1 - this.state.size) * 100}%` :
+      wrapStyle.height = redux ?
+        `${(1 - size) * 100}%` :
         '100%';
     }
     return (
@@ -134,12 +141,13 @@ export default class App extends Component {
   }
 
   render() {
+    const { redux, react } = this.props.setting;
     return (
       <div style={styles.container}>
         <Debugger />
         {this.renderReduxDevTools()}
         {this.renderReactDevTools()}
-        {!this.state.react && !this.state.redux && this.renderBackground()}
+        {!react && !redux && this.renderBackground()}
       </div>
     );
   }

app/reducers/index.js

@@ -1,6 +1,8 @@
 import { combineReducers } from 'redux';
+import setting from './setting';
 import debuggerReducer from './debugger';
 
 export default combineReducers({
+  setting,
   debugger: debuggerReducer,
 });

app/reducers/setting.js

@@ -0,0 +1,29 @@
+import { TOGGLE_DEVTOOLS, RESIZE_DEVTOOLS } from '../actions/setting';
+
+const initialState = {
+  react: true,
+  redux: true,
+  size: 0.6,
+};
+
+const actionsMap = {
+  [TOGGLE_DEVTOOLS]: (state, action) => ({
+    ...state,
+    [action.name]: !state[action.name],
+  }),
+  [RESIZE_DEVTOOLS]: (state, action) => {
+    if (!state.redux || !state.react) {
+      return state;
+    }
+    const { size } = action;
+    if (size < 0.2) return { ...state, size: 0.2 };
+    if (size > 0.8) return { ...state, size: 0.8 };
+    return { ...state, size };
+  },
+};
+
+export default (state = initialState, action) => {
+  const reduceFn = actionsMap[action.type];
+  if (!reduceFn) return state;
+  return reduceFn(state, action);
+};

app/store/configureStore.js

@@ -1,5 +1,9 @@
 import { createStore } from 'redux';
+import { autoRehydrate, persistStore } from 'redux-persist';
 import reducer from '../reducers';
 
-export default initialState =>
-  createStore(reducer, initialState);
+export default initialState => {
+  const store = createStore(reducer, initialState, autoRehydrate());
+  persistStore(store, { whitelist: ['setting'] });
+  return store;
+};

package.json

@@ -64,6 +64,7 @@
     "react-redux": "^4.4.5",
     "redux": "^3.5.2",
     "redux-devtools-instrument": "^1.0.1",
+    "redux-persist": "^4.0.0-alpha5",
     "remotedev-app": "0.7.0",
     "remotedev-utils": "0.0.5",
     "ws": "^1.1.1"