Saving userConfig redux slice to local storage.
This commit is contained in:
parent
3bd72df258
commit
da00ac8d44
|
@ -108,6 +108,7 @@
|
||||||
"read-last-lines": "1.3.0",
|
"read-last-lines": "1.3.0",
|
||||||
"redux": "4.0.1",
|
"redux": "4.0.1",
|
||||||
"redux-logger": "3.0.6",
|
"redux-logger": "3.0.6",
|
||||||
|
"redux-persist": "^6.0.0",
|
||||||
"redux-promise-middleware": "6.1.0",
|
"redux-promise-middleware": "6.1.0",
|
||||||
"reselect": "4.0.0",
|
"reselect": "4.0.0",
|
||||||
"rimraf": "2.6.2",
|
"rimraf": "2.6.2",
|
||||||
|
|
|
@ -19,6 +19,9 @@ import { makeLookup } from '../../util';
|
||||||
import { LeftPane } from '../LeftPane';
|
import { LeftPane } from '../LeftPane';
|
||||||
import { SessionMainPanel } from '../SessionMainPanel';
|
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()
|
// Workaround: A react component's required properties are filtering up through connect()
|
||||||
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363
|
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363
|
||||||
|
|
||||||
|
@ -54,13 +57,18 @@ export class SessionInboxView extends React.Component<any, State> {
|
||||||
return <></>;
|
return <></>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let persistor = persistStore(this.store);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Provider store={this.store}>
|
<Provider store={this.store}>
|
||||||
<div className="gutter">
|
<PersistGate loading={null} persistor={persistor}>
|
||||||
<div className="network-status-container" />
|
|
||||||
{this.renderLeftPane()}
|
<div className="gutter">
|
||||||
</div>
|
<div className="network-status-container" />
|
||||||
<SessionMainPanel />
|
{this.renderLeftPane()}
|
||||||
|
</div>
|
||||||
|
<SessionMainPanel />
|
||||||
|
</PersistGate>
|
||||||
</Provider>
|
</Provider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -362,7 +362,9 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
|
||||||
setFn: () => {
|
setFn: () => {
|
||||||
window.inboxStore?.dispatch(toggleAudioAutoplay());
|
window.inboxStore?.dispatch(toggleAudioAutoplay());
|
||||||
},
|
},
|
||||||
content: undefined,
|
content: {
|
||||||
|
defaultValue: window.inboxStore?.getState().userConfig.audioAutoplay
|
||||||
|
},
|
||||||
comparisonValue: undefined,
|
comparisonValue: undefined,
|
||||||
onClick: undefined,
|
onClick: undefined,
|
||||||
confirmationDialogParams: undefined,
|
confirmationDialogParams: undefined,
|
||||||
|
|
|
@ -2,6 +2,8 @@ import promise from 'redux-promise-middleware';
|
||||||
import { createLogger } from 'redux-logger';
|
import { createLogger } from 'redux-logger';
|
||||||
import { configureStore } from '@reduxjs/toolkit';
|
import { configureStore } from '@reduxjs/toolkit';
|
||||||
import { reducer as allReducers } from './reducer';
|
import { reducer as allReducers } from './reducer';
|
||||||
|
import { persistReducer } from "redux-persist";
|
||||||
|
import storage from 'redux-persist/lib/storage';
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const env = window.getEnvironment();
|
const env = window.getEnvironment();
|
||||||
|
@ -22,13 +24,23 @@ const logger = createLogger({
|
||||||
logger: directConsole,
|
logger: directConsole,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const persistConfig = {
|
||||||
|
key: 'root',
|
||||||
|
storage,
|
||||||
|
whitelist: ['userConfig']
|
||||||
|
}
|
||||||
|
|
||||||
|
const persistedReducer = persistReducer(persistConfig, allReducers);
|
||||||
|
|
||||||
// Exclude logger if we're in production mode
|
// Exclude logger if we're in production mode
|
||||||
const disableLogging = env === 'production' || true; // ALWAYS TURNED OFF
|
const disableLogging = env === 'production' || true; // ALWAYS TURNED OFF
|
||||||
|
// const middlewareList = disableLogging ? [promise, thunk] : [promise, logger, thunk ];
|
||||||
const middlewareList = disableLogging ? [promise] : [promise, logger];
|
const middlewareList = disableLogging ? [promise] : [promise, logger];
|
||||||
|
|
||||||
export const createStore = (initialState: any) =>
|
export const createStore = (initialState: any) =>
|
||||||
configureStore({
|
configureStore({
|
||||||
reducer: allReducers,
|
// reducer: allReducers,
|
||||||
|
reducer: persistedReducer,
|
||||||
preloadedState: initialState,
|
preloadedState: initialState,
|
||||||
middleware: (getDefaultMiddleware: any) => getDefaultMiddleware().concat(middlewareList),
|
middleware: (getDefaultMiddleware: any) => getDefaultMiddleware().concat(middlewareList),
|
||||||
});
|
});
|
||||||
|
|
|
@ -9660,6 +9660,11 @@ redux-logger@3.0.6:
|
||||||
dependencies:
|
dependencies:
|
||||||
deep-diff "^0.3.5"
|
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:
|
redux-promise-middleware@6.1.0:
|
||||||
version "6.1.0"
|
version "6.1.0"
|
||||||
resolved "https://registry.yarnpkg.com/redux-promise-middleware/-/redux-promise-middleware-6.1.0.tgz#ecdb22488cdd673c1a3f0d278d82b48d92ca5d06"
|
resolved "https://registry.yarnpkg.com/redux-promise-middleware/-/redux-promise-middleware-6.1.0.tgz#ecdb22488cdd673c1a3f0d278d82b48d92ca5d06"
|
||||||
|
|
Loading…
Reference in New Issue