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 (
-    if (!options['s:hostname'] || !options['s:port']) return;
+    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 {
+class Root extends Component {
-  socketOptions?: ConnectionOptions;
-}
-
-class Root extends Component<Props> {
   store?: Store<StoreState, StoreAction>;
+  persistor?: Persistor;
 
   UNSAFE_componentWillMount() {
-    configureStore((store, preloadedState) => {
+    const { store, persistor } = configureStore();
-      this.store = store;
+    this.store = store;
-      store.dispatch({
+    this.persistor = persistor;
-        type: CONNECT_REQUEST,
+    store.dispatch({
-        options: (preloadedState!.connection ||
+      type: CONNECT_REQUEST,
-          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,66 +1,49 @@
-import { createStore, compose, applyMiddleware, Store } from 'redux';
+import { createStore, compose, applyMiddleware } from 'redux';
 import localForage from 'localforage';
-import {
+import { persistReducer, persistStore } from 'redux-persist';
-  getStoredState,
-  createPersistor,
-  PersistorConfig,
-} 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(
+const persistConfig = {
-  callback: (
+  key: 'redux-devtools',
-    store: Store<StoreState, StoreAction>,
+  blacklist: ['instances', 'socket'],
-    restoredState: Partial<StoreState> | undefined
+  storage: localForage,
-  ) => void,
+};
-  key?: string
-) {
-  const persistConfig: PersistorConfig = {
-    keyPrefix: `redux-devtools${key || ''}:`,
-    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
+const persistedReducer = persistReducer(persistConfig, rootReducer);
-  getStoredState<StoreState>(persistConfig, (err, restoredState) => {
+
-    let composeEnhancers = compose;
+export default function configureStore() {
-    if (process.env.NODE_ENV !== 'production') {
+  let composeEnhancers = compose;
-      if (
+  if (process.env.NODE_ENV !== 'production') {
-        (
+    if (
-          window as unknown as {
+      (
-            __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
+        window as unknown as {
-          }
+          __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
-        ).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+        }
-      ) {
+      ).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
-        composeEnhancers = (
+    ) {
-          window as unknown as {
+      composeEnhancers = (
-            __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: typeof compose;
+        window as unknown as {
-          }
+          __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: typeof compose;
-        ).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
+        }
-      }
+      ).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
-      if (module.hot) {
-        // Enable Webpack hot module replacement for reducers
-        module.hot.accept('../reducers', () => {
-          // eslint-disable-next-line @typescript-eslint/no-var-requires
-          const nextReducer = require('../reducers'); // eslint-disable-line global-require
-          store.replaceReducer(nextReducer);
-        });
-      }
     }
+    if (module.hot) {
+      // Enable Webpack hot module replacement for reducers
+      module.hot.accept('../reducers', () => {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const nextReducer = require('../reducers'); // eslint-disable-line global-require
+        store.replaceReducer(nextReducer);
+      });
+    }
+  }
 
-    const store = createStore(
+  const store = createStore<StoreState, StoreAction, unknown, unknown>(
-      rootReducer,
+    persistedReducer as any,
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    composeEnhancers(applyMiddleware(exportState, api))
-      // @ts-ignore
+  );
-      restoredState,
+  const persistor = persistStore(store);
-      composeEnhancers(applyMiddleware(exportState, api))
+  return { store, persistor };
-    );
-    const persistor = createPersistor(store, persistConfig);
-    callback(store, restoredState);
-    if (err) persistor.purge();
-  });
 }

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":
+"redux-persist@npm:^6.0.0":
-  version: 4.10.2
+  version: 6.0.0
-  resolution: "redux-persist@npm:4.10.2"
+  resolution: "redux-persist@npm:6.0.0"
-  dependencies:
+  peerDependencies:
-    json-stringify-safe: ^5.0.1
+    redux: ">4.0.0"
-    lodash: ^4.17.4
+  checksum: edaf10dbf17351ce8058d0802357adae8665b3a1ff39371834e37838ddbe1a79cccbc717b8ba54acb5307651ccf51d0f7dc1cbc8dbae0726ff952d11ef61c6b8
-    lodash-es: ^4.17.4
-  checksum: 78f476357960d1ffae2cac2da4ae6937d6c2d5350a51024bc457e4e2c1e5d65db0cd019508446575a54c306065afcbf278c3f186979d7f207c59f26966d1cf45
   languageName: node
   linkType: hard