Persists entire Redux store to/from sessionStorage

Author: andrewn

client/persistState.js

@@ -0,0 +1,42 @@
+/*
+  Based on: https://github.com/elgerlambert/redux-localstorage
+*/
+export default function persistState() {
+  const key = 'p5js-editor';
+  const storage = sessionStorage;
+
+  return next => (reducer, initialStateOrEnhancer, enhancerOrUndefined) => {
+    let initialState = initialStateOrEnhancer;
+    let enhancer = enhancerOrUndefined;
+
+    if (typeof initialStateOrEnhancer === 'function' &&
+      typeof enhancerOrUndefined === 'undefined') {
+      initialState = undefined;
+      enhancer = initialStateOrEnhancer;
+    }
+
+    let persistedState;
+    let finalInitialState;
+
+    try {
+      persistedState = JSON.parse(storage.getItem(key));
+      finalInitialState = Object.assign({}, initialState, persistedState);
+    } catch (error) {
+      console.warn('Failed to retrieve initialize state from storage:', error);
+    }
+
+    const store = next(reducer, finalInitialState, enhancer);
+
+    store.subscribe(() => {
+      const state = store.getState();
+
+      try {
+        storage.setItem(key, JSON.stringify(state));
+      } catch (error) {
+        console.warn('Unable to persist state to storage:', error);
+      }
+    });
+
+    return store;
+  };
+}

client/store.js

@@ -2,10 +2,12 @@ import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
 import DevTools from './modules/App/components/DevTools';
 import rootReducer from './reducers';
+import persistState from './persistState';
 
 export default function configureStore(initialState) {
   const enhancers = [
     applyMiddleware(thunk),
+    persistState(),
   ];
 
   if (process.env.CLIENT && process.env.NODE_ENV === 'development') {