Adding LocalStorage to persist state

dist/bundle.js

@@ -33337,7 +33337,12 @@ var MoveText = function (_React$Component) {
       return _react2.default.createElement(
         'div',
         { id: 'text', className: 'BS col-xs-12' },
-        _react2.default.createElement('img', { id: 'move', alt: '', src: _moves2.default[value].url, className: 'img-responsive' }),
+        _react2.default.createElement('img', {
+          id: 'move',
+          alt: '',
+          src: _moves2.default[value].url,
+          className: 'img-responsive'
+        }),
         favMoves.includes(value) ? _react2.default.createElement(
           'button',
           {
@@ -33472,7 +33477,35 @@ function _interopRequireDefault(obj) {
 
 var middleware = (0, _redux.applyMiddleware)((0, _reduxLogger.createLogger)());
 
-exports.default = (0, _redux.createStore)(_reducers2.default, middleware);
+var saveToLocalStorage = function saveToLocalStorage(state) {
+  try {
+    var serializedState = JSON.stringify(state);
+    localStorage.setItem('state', serializedState);
+  } catch (err) {
+    console.error('Error saving state to local storage:', err);
+  }
+};
+
+var loadFromLocalStorage = function loadFromLocalStorage() {
+  try {
+    var serializedState = localStorage.getItem('state');
+    if (serializedState === null) return undefined;
+    return JSON.parse(serializedState);
+  } catch (err) {
+    console.error('Error loading state from local storage:', err);
+    return undefined;
+  }
+};
+
+var persistedState = loadFromLocalStorage();
+
+var store = (0, _redux.createStore)(_reducers2.default, persistedState, middleware);
+
+store.subscribe(function () {
+  saveToLocalStorage(store.getState());
+});
+
+exports.default = store;
 
 /***/ }),
 /* 81 */

src/containers/MoveText.jsx

@@ -1,62 +1,67 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import moves from '../static_data/moves.json';
-import { markFavMove, unmarkFavMove } from '../actions';
+import React from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import moves from '../static_data/moves.json'
+import { markFavMove, unmarkFavMove } from '../actions'
 
 class MoveText extends React.Component {
   favClickHandler() {
-    const { value, favMove } = this.props;
-    favMove(value);
+    const { value, favMove } = this.props
+    favMove(value)
   }
   unfavClickHandler() {
-    const { value, unFavMove } = this.props;
-    unFavMove(value);
+    const { value, unFavMove } = this.props
+    unFavMove(value)
   }
 
   render() {
-    const { value, favMoves } = this.props;
+    const { value, favMoves } = this.props
     return (
       <div id="text" className="BS col-xs-12">
-        <img id="move" alt="" src={moves[value].url} className="img-responsive" />
-        { favMoves.includes(value) ?
+        <img
+          id="move"
+          alt=""
+          src={moves[value].url}
+          className="img-responsive"
+        />
+        {favMoves.includes(value) ? (
           <button
             type="button"
             className="btn btn-default pull-right heart"
             onClick={() => this.unfavClickHandler()}
           >
             <span className="glyphicon glyphicon-heart" />
           </button>
-          :
+        ) : (
           <button
             type="button"
             className="btn btn-default pull-right heart"
             onClick={() => this.favClickHandler()}
           >
             <span className="glyphicon glyphicon-heart-empty" />
           </button>
-        }
+        )}
         <p id="moveTips">{moves[value].tips}</p>
       </div>
-    );
+    )
   }
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   value: state.imgReducer,
-  favMoves: state.favReducer
-});
+  favMoves: state.favReducer,
+})
 
 const mapDispatchToProps = {
   favMove: markFavMove,
-  unFavMove: unmarkFavMove
-};
+  unFavMove: unmarkFavMove,
+}
 
 MoveText.propTypes = {
   value: PropTypes.string.isRequired,
   favMoves: PropTypes.arrayOf(PropTypes.string).isRequired,
   favMove: PropTypes.func.isRequired,
   unFavMove: PropTypes.func.isRequired,
-};
+}
 
-export default connect(mapStateToProps, mapDispatchToProps)(MoveText);
+export default connect(mapStateToProps, mapDispatchToProps)(MoveText)

src/store.js

@@ -1,7 +1,35 @@
-import { applyMiddleware, createStore } from 'redux';
-import { createLogger } from 'redux-logger';
-import mainReducer from './reducers';
+import { applyMiddleware, createStore } from 'redux'
+import { createLogger } from 'redux-logger'
+import mainReducer from './reducers'
 
-const middleware = applyMiddleware(createLogger());
+const middleware = applyMiddleware(createLogger())
 
-export default createStore(mainReducer, middleware);
+const saveToLocalStorage = (state) => {
+  try {
+    const serializedState = JSON.stringify(state)
+    localStorage.setItem('state', serializedState)
+  } catch (err) {
+    console.error('Error saving state to local storage:', err)
+  }
+}
+
+const loadFromLocalStorage = () => {
+  try {
+    const serializedState = localStorage.getItem('state')
+    if (serializedState === null) return undefined
+    return JSON.parse(serializedState)
+  } catch (err) {
+    console.error('Error loading state from local storage:', err)
+    return undefined
+  }
+}
+
+const persistedState = loadFromLocalStorage()
+
+const store = createStore(mainReducer, persistedState, middleware)
+
+store.subscribe(() => {
+  saveToLocalStorage(store.getState())
+})
+
+export default store