Added redux middleware to save parts of the store in the local storage transparently

src/App.js

@@ -1,29 +1,23 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import NotFound from './common/NotFound';
 import './App.scss';
 
-const App = (MainHeader, Home, MenuLayout, CreateServer, EditServer, Settings) => ({ loadRealTimeUpdates }) => {
-  useEffect(() => {
-    loadRealTimeUpdates();
-  }, []);
+const App = (MainHeader, Home, MenuLayout, CreateServer, EditServer, Settings) => () => (
+  <div className="container-fluid app-container">
+    <MainHeader />
 
-  return (
-    <div className="container-fluid app-container">
-      <MainHeader />
-
-      <div className="app">
-        <Switch>
-          <Route exact path="/" component={Home} />
-          <Route exact path="/settings" component={Settings} />
-          <Route exact path="/server/create" component={CreateServer} />
-          <Route exact path="/server/:serverId/edit" component={EditServer} />
-          <Route path="/server/:serverId" component={MenuLayout} />
-          <Route component={NotFound} />
-        </Switch>
-      </div>
+    <div className="app">
+      <Switch>
+        <Route exact path="/" component={Home} />
+        <Route exact path="/settings" component={Settings} />
+        <Route exact path="/server/create" component={CreateServer} />
+        <Route exact path="/server/:serverId/edit" component={EditServer} />
+        <Route path="/server/:serverId" component={MenuLayout} />
+        <Route component={NotFound} />
+      </Switch>
     </div>
-  );
-};
+  </div>
+);
 
 export default App;

src/container/index.js

@@ -29,7 +29,6 @@ const connect = (propsFromState, actionServiceNames = []) =>
   );
 
 bottle.serviceFactory('App', App, 'MainHeader', 'Home', 'MenuLayout', 'CreateServer', 'EditServer', 'Settings');
-bottle.decorator('App', connect(null, [ 'loadRealTimeUpdates' ]));
 
 provideCommonServices(bottle, connect, withRouter);
 provideShortUrlsServices(bottle, connect);

src/container/store.js

@@ -1,13 +1,20 @@
 import ReduxThunk from 'redux-thunk';
 import { applyMiddleware, compose, createStore } from 'redux';
+import { save, load } from '@shlinkio/redux-localstorage-simple';
 import reducers from '../reducers';
 
 const composeEnhancers = process.env.NODE_ENV !== 'production' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
   ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
   : compose;
 
-const store = createStore(reducers, composeEnhancers(
-  applyMiddleware(ReduxThunk)
+const localStorageConfig = {
+  states: [ 'settings' ],
+  namespace: 'shlink',
+  namespaceSeparator: '.',
+};
+
+const store = createStore(reducers, load(localStorageConfig), composeEnhancers(
+  applyMiddleware(save(localStorageConfig), ReduxThunk)
 ));
 
 export default store;

src/settings/reducers/settings.js

@@ -1,7 +1,7 @@
 import { handleActions } from 'redux-actions';
 import PropTypes from 'prop-types';
 
-export const LOAD_REAL_TIME_UPDATES = 'shlink/realTimeUpdates/LOAD_REAL_TIME_UPDATES';
+export const SET_REAL_TIME_UPDATES = 'shlink/realTimeUpdates/SET_REAL_TIME_UPDATES';
 
 export const SettingsType = PropTypes.shape({
   realTimeUpdates: PropTypes.shape({
@@ -16,20 +16,10 @@ const initialState = {
 };
 
 export default handleActions({
-  [LOAD_REAL_TIME_UPDATES]: (state, { realTimeUpdates }) => ({ ...state, realTimeUpdates }),
+  [SET_REAL_TIME_UPDATES]: (state, { realTimeUpdates }) => ({ ...state, realTimeUpdates }),
 }, initialState);
 
-export const setRealTimeUpdates = ({ updateSettings }, loadRealTimeUpdatesAction) => (enabled) => {
-  updateSettings({ realTimeUpdates: { enabled } });
-
-  return loadRealTimeUpdatesAction();
-};
-
-export const loadRealTimeUpdates = ({ loadSettings }) => () => {
-  const { realTimeUpdates = {} } = loadSettings();
-
-  return {
-    type: LOAD_REAL_TIME_UPDATES,
-    realTimeUpdates,
-  };
-};
+export const setRealTimeUpdates = (enabled) => ({
+  type: SET_REAL_TIME_UPDATES,
+  realTimeUpdates: { enabled },
+});

src/settings/services/provideServices.js

@@ -1,6 +1,6 @@
 import RealTimeUpdates from '../RealTimeUpdates';
 import Settings from '../Settings';
-import { loadRealTimeUpdates, setRealTimeUpdates } from '../reducers/settings';
+import { setRealTimeUpdates } from '../reducers/settings';
 import SettingsService from './SettingsService';
 
 const provideServices = (bottle, connect) => {
@@ -14,8 +14,7 @@ const provideServices = (bottle, connect) => {
   bottle.service('SettingsService', SettingsService, 'Storage');
 
   // Actions
-  bottle.serviceFactory('setRealTimeUpdates', setRealTimeUpdates, 'SettingsService', 'loadRealTimeUpdates');
-  bottle.serviceFactory('loadRealTimeUpdates', loadRealTimeUpdates, 'SettingsService');
+  bottle.serviceFactory('setRealTimeUpdates', () => setRealTimeUpdates);
 };
 
 export default provideServices;