feat(*): create localStorage module to save persisted data

configure store pass the persisted data and use __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ to make an
enhancer. Also on movie's reducer, return a new state by apply object spread

package.json

@@ -103,6 +103,7 @@
     "firebase": "4.3.1",
     "flat-ui": "2.1.1",
     "global": "4.3.2",
+    "lodash.throttle": "4.1.1",
     "react": "16.2.0",
     "react-dom": "16.2.0",
     "react-medium-editor": "1.8.1",

src/localStorage.js

@@ -0,0 +1,48 @@
+/**
+ * @module localStorage
+ * persist the state of the application in the localStorage using browser localStorage API.
+ */
+
+/**
+ * @desc Look into localStorage by key, retrieve a string, and try to parse it as JSON.
+ *
+ * @return {JSON}
+ */
+export const loadState = () => {
+  /**
+   * It's important that we wrap this code into try/catch because calls to localStorage.getItem can fail
+   * if the user privacy mode does not allow the use of localStorage.
+   */
+  try {
+    const serializedState = localStorage.getItem('state');
+    // If serializedState is null it means that the key doesn't exist so I'll return undefined to let the reducers initialize the state instead.
+    if (serializedState === null) {
+      return undefined;
+    }
+    // If the serializedState string exists I'm going to use JSON.parse in order to turn it into the state object.
+    return JSON.parse(serializedState);
+  } catch (err) {
+    // In case of any errors return undefined to let reducers initialize the application.
+    return undefined;
+  }
+
+};
+
+/**
+ * Sets an item on localStorage
+ * @param {Object} state
+ * @return {void}
+ */
+export const saveState = (state) => {
+  /**
+   * Serializes it to string by using JSON.stringify. This will only work if the state is serializable,
+   * but this is the general recommendation in Redux. The state SHOULD be serializable.
+   */
+  try {
+    const serializedState = JSON.stringify(state);
+    localStorage.setItem('state', serializedState);
+  } catch (err) {
+    console.error('localStorage shit: ', err);
+  }
+
+};

src/reducers/movie.js

@@ -6,20 +6,24 @@ import { SET_MOVIE }  from '../constants/ActionTypes';
 
 /**
  *
- * @param state
- * @param action
- * @return {*}
+ * @param {Object} state = {}
+ * @param {Object} action
+ * @return {Object} new state
  */
 export default function movies(state = {}, action) {
 
   switch (action.type) {
 
     case SET_MOVIE:
 
-      return action.movie;
+      return {
+        ...state,
+        movie: action.movie
+      };
 
     default:
       return state;
+
   }
 
 }

src/store.js

@@ -1,8 +1,31 @@
-import { createStore, applyMiddleware } from 'redux';
+/**
+ * @module store
+ */
+
+import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
+import throttle from 'lodash/throttle';
 
-const REDUX_DEVTOOLS = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
+import { saveState, loadState } from './localStorage';
 
 import reducer from './reducers';
+// Get the state from localStorage
+const persistedState = loadState();
+// when the extension is not installed, we’re using Redux compose here.
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+const store = createStore(
+  reducer,
+  persistedState,
+  composeEnhancers(applyMiddleware(thunk))
+);
+
+// Save the state any time the store state changes
+store.subscribe(throttle(() => {
+  // Rather than pass the whole state object, just pass an object with the key field from the state object.
+  saveState({
+    movie: store.getState().movie,
+  });
+}, 1000));
 
-export default createStore(reducer, REDUX_DEVTOOLS, applyMiddleware(thunk));
+export default store;

yarn.lock

@@ -831,7 +831,7 @@ babel-plugin-transform-flow-strip-types@^6.22.0:
     babel-plugin-syntax-flow "^6.18.0"
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-object-rest-spread@^6.26.0:
+[email protected]:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
   dependencies:
@@ -5212,6 +5212,10 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"