fix(deps): update dependency redux-persist to v6 (#811)

* fix(deps): update dependency redux-persist to v6

* Changes

* Add PersistGate

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Nathan Bierema <nbierema@gmail.com>

extension/src/app/stores/windowStore.ts

@@ -56,17 +56,14 @@ export default function configureStore(
   }
   const store = createStore(rootReducer, preloadedState, enhancer);
 
-  chrome.storage.local.get(['s:hostname', 's:port', 's:secure'], (options) => {
-    if (!options['s:hostname'] || !options['s:port']) return;
+  if (
+    store.getState().connection.options.hostname &&
+    store.getState().connection.options.port
+  ) {
     store.dispatch({
       type: CONNECT_REQUEST,
-      options: {
-        hostname: options['s:hostname'],
-        port: options['s:port'],
-        secure: options['s:secure'],
-      } as any,
-    });
     });
+  }
 
   return store;
 }

packages/redux-devtools-app/package.json

@@ -58,7 +58,7 @@
     "react-is": "^16.13.1",
     "react-redux": "^7.2.4",
     "redux": "^4.1.1",
-    "redux-persist": "^4.10.2",
+    "redux-persist": "^6.0.0",
     "socketcluster-client": "^14.3.2",
     "styled-components": "^5.3.1"
   },

packages/redux-devtools-app/src/actions/index.ts

@@ -446,7 +446,6 @@ export interface RemoveInstanceAction {
 
 export interface ConnectRequestAction {
   type: typeof CONNECT_REQUEST;
-  options: ConnectionOptions;
 }
 
 interface ConnectSuccessPayload {

packages/redux-devtools-app/src/index.tsx

@@ -1,37 +1,34 @@
 import React, { Component } from 'react';
 import { Provider } from 'react-redux';
 import { Store } from 'redux';
+import { Persistor } from 'redux-persist';
+import { PersistGate } from 'redux-persist/integration/react';
 import configureStore from './store/configureStore';
 import { CONNECT_REQUEST } from './constants/socketActionTypes';
 import App from './containers/App';
 import { StoreState } from './reducers';
-import { ConnectionOptions, StoreAction } from './actions';
+import { StoreAction } from './actions';
 
-interface Props {
-  socketOptions?: ConnectionOptions;
-}
-
-class Root extends Component<Props> {
+class Root extends Component {
   store?: Store<StoreState, StoreAction>;
+  persistor?: Persistor;
 
   UNSAFE_componentWillMount() {
-    configureStore((store, preloadedState) => {
+    const { store, persistor } = configureStore();
     this.store = store;
+    this.persistor = persistor;
     store.dispatch({
       type: CONNECT_REQUEST,
-        options: (preloadedState!.connection ||
-          this.props.socketOptions) as ConnectionOptions,
-      });
-      this.forceUpdate();
     });
   }
 
   render() {
     if (!this.store) return null;
-    const AppAsAny = App as any;
     return (
       <Provider store={this.store}>
-        <AppAsAny {...this.props} />
+        <PersistGate loading={null} persistor={this.persistor!}>
+          <App />
+        </PersistGate>
       </Provider>
     );
   }

packages/redux-devtools-app/src/store/configureStore.ts

@@ -1,32 +1,20 @@
-import { createStore, compose, applyMiddleware, Store } from 'redux';
+import { createStore, compose, applyMiddleware } from 'redux';
 import localForage from 'localforage';
-import {
-  getStoredState,
-  createPersistor,
-  PersistorConfig,
-} from 'redux-persist';
+import { persistReducer, persistStore } from 'redux-persist';
 import api from '../middlewares/api';
 import exportState from '../middlewares/exportState';
 import rootReducer, { StoreState } from '../reducers';
 import { StoreAction } from '../actions';
 
-export default function configureStore(
-  callback: (
-    store: Store<StoreState, StoreAction>,
-    restoredState: Partial<StoreState> | undefined
-  ) => void,
-  key?: string
-) {
-  const persistConfig: PersistorConfig = {
-    keyPrefix: `redux-devtools${key || ''}:`,
+const persistConfig = {
+  key: 'redux-devtools',
   blacklist: ['instances', 'socket'],
   storage: localForage,
-    serialize: (data: unknown) => data,
-    deserialize: (data: unknown) => data,
-  } as unknown as PersistorConfig;
+};
 
-  // eslint-disable-next-line @typescript-eslint/no-floating-promises
-  getStoredState<StoreState>(persistConfig, (err, restoredState) => {
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
+export default function configureStore() {
   let composeEnhancers = compose;
   if (process.env.NODE_ENV !== 'production') {
     if (
@@ -52,15 +40,10 @@ export default function configureStore(
     }
   }
 
-    const store = createStore(
-      rootReducer,
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      restoredState,
+  const store = createStore<StoreState, StoreAction, unknown, unknown>(
+    persistedReducer as any,
     composeEnhancers(applyMiddleware(exportState, api))
   );
-    const persistor = createPersistor(store, persistConfig);
-    callback(store, restoredState);
-    if (err) persistor.purge();
-  });
+  const persistor = persistStore(store);
+  return { store, persistor };
 }

yarn.lock

@@ -4897,7 +4897,7 @@ __metadata:
     react-is: ^16.13.1
     react-redux: ^7.2.4
     redux: ^4.1.1
-    redux-persist: ^4.10.2
+    redux-persist: ^6.0.0
     socketcluster-client: ^14.3.2
     styled-components: ^5.3.1
   peerDependencies:
@@ -19987,13 +19987,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"lodash-es@npm:^4.17.4":
-  version: 4.17.21
-  resolution: "lodash-es@npm:4.17.21"
-  checksum: 05cbffad6e2adbb331a4e16fbd826e7faee403a1a04873b82b42c0f22090f280839f85b95393f487c1303c8a3d2a010048bf06151a6cbe03eee4d388fb0a12d2
-  languageName: node
-  linkType: hard
-
 "lodash._baseindexof@npm:*":
   version: 3.1.0
   resolution: "lodash._baseindexof@npm:3.1.0"
@@ -25654,14 +25647,12 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"redux-persist@npm:^4.10.2":
-  version: 4.10.2
-  resolution: "redux-persist@npm:4.10.2"
-  dependencies:
-    json-stringify-safe: ^5.0.1
-    lodash: ^4.17.4
-    lodash-es: ^4.17.4
-  checksum: 78f476357960d1ffae2cac2da4ae6937d6c2d5350a51024bc457e4e2c1e5d65db0cd019508446575a54c306065afcbf278c3f186979d7f207c59f26966d1cf45
+"redux-persist@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "redux-persist@npm:6.0.0"
+  peerDependencies:
+    redux: ">4.0.0"
+  checksum: edaf10dbf17351ce8058d0802357adae8665b3a1ff39371834e37838ddbe1a79cccbc717b8ba54acb5307651ccf51d0f7dc1cbc8dbae0726ff952d11ef61c6b8
   languageName: node
   linkType: hard