Saving userConfig redux slice to local storage.

package.json

@@ -108,6 +108,7 @@
     "read-last-lines": "1.3.0",
     "redux": "4.0.1",
     "redux-logger": "3.0.6",
+    "redux-persist": "^6.0.0",
     "redux-promise-middleware": "6.1.0",
     "reselect": "4.0.0",
     "rimraf": "2.6.2",

ts/components/session/SessionInboxView.tsx

@@ -19,6 +19,9 @@ import { makeLookup } from '../../util';
 import { LeftPane } from '../LeftPane';
 import { SessionMainPanel } from '../SessionMainPanel';
 
+import { PersistGate } from 'redux-persist/integration/react';
+import { persistStore } from 'redux-persist';
+
 // Workaround: A react component's required properties are filtering up through connect()
 //   https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363
 
@@ -54,13 +57,18 @@ export class SessionInboxView extends React.Component<any, State> {
       return <></>;
     }
 
+    let persistor = persistStore(this.store);
+
     return (
       <Provider store={this.store}>
-        <div className="gutter">
-          <div className="network-status-container" />
-          {this.renderLeftPane()}
-        </div>
-        <SessionMainPanel />
+        <PersistGate loading={null} persistor={persistor}>
+
+          <div className="gutter">
+            <div className="network-status-container" />
+            {this.renderLeftPane()}
+          </div>
+          <SessionMainPanel />
+        </PersistGate>
       </Provider>
     );
   }

ts/components/session/settings/SessionSettings.tsx

@@ -362,7 +362,9 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
         setFn: () => {
           window.inboxStore?.dispatch(toggleAudioAutoplay());
         },
-        content: undefined,
+        content: {
+          defaultValue: window.inboxStore?.getState().userConfig.audioAutoplay
+        },
         comparisonValue: undefined,
         onClick: undefined,
         confirmationDialogParams: undefined,

ts/state/createStore.ts

@@ -2,6 +2,8 @@ import promise from 'redux-promise-middleware';
 import { createLogger } from 'redux-logger';
 import { configureStore } from '@reduxjs/toolkit';
 import { reducer as allReducers } from './reducer';
+import { persistReducer } from "redux-persist";
+import storage from 'redux-persist/lib/storage';
 
 // @ts-ignore
 const env = window.getEnvironment();
@@ -22,13 +24,23 @@ const logger = createLogger({
   logger: directConsole,
 });
 
+const persistConfig = {
+  key: 'root',
+  storage,
+  whitelist: ['userConfig']
+}
+
+const persistedReducer = persistReducer(persistConfig, allReducers);
+
 // Exclude logger if we're in production mode
 const disableLogging = env === 'production' || true; // ALWAYS TURNED OFF
+// const middlewareList = disableLogging ? [promise, thunk] : [promise, logger, thunk ];
 const middlewareList = disableLogging ? [promise] : [promise, logger];
 
 export const createStore = (initialState: any) =>
   configureStore({
-    reducer: allReducers,
+    // reducer: allReducers,
+    reducer: persistedReducer,
     preloadedState: initialState,
     middleware: (getDefaultMiddleware: any) => getDefaultMiddleware().concat(middlewareList),
   });

yarn.lock

@@ -9660,6 +9660,11 @@ redux-logger@3.0.6:
   dependencies:
     deep-diff "^0.3.5"
 
+redux-persist@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
+  integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==
+
 redux-promise-middleware@6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/redux-promise-middleware/-/redux-promise-middleware-6.1.0.tgz#ecdb22488cdd673c1a3f0d278d82b48d92ca5d06"