Upgrade redux persist (#825)

* chore(package.json): update redux-persist version

* refactor(store): update store configuration

update store configuration to use latest version of redux persist

Author: Arjun

App.js

@@ -3,21 +3,16 @@ import { Provider } from 'react-redux';
 import styled from 'styled-components';
 import {
   AppRegistry,
-  AsyncStorage,
   LayoutAnimation,
   StatusBar,
   Platform,
 } from 'react-native';
-import { persistStore } from 'redux-persist';
-import createEncryptor from 'redux-persist-transform-encrypt';
-import DeviceInfo from 'react-native-device-info';
-import md5 from 'md5';
 import codePush from 'react-native-code-push';
-
+import { PersistGate } from 'redux-persist/integration/react';
 import { colors, getStatusBarConfig } from 'config';
 import { getCurrentLocale, configureLocale } from 'utils';
 import { GitPoint } from './routes';
-import { configureStore } from './root.store';
+import { configureStore, persistor } from './root.store';
 
 const Container = styled.View`
   align-items: center;
@@ -52,22 +47,6 @@ class App extends Component {
   }
 
   componentWillMount() {
-    const encryptor = createEncryptor({
-      secretKey: md5(DeviceInfo.getUniqueID()),
-    });
-
-    persistStore(
-      configureStore,
-      {
-        storage: AsyncStorage,
-        transforms: [encryptor],
-        whitelist: ['auth'],
-      },
-      () => {
-        this.setState({ rehydrated: true });
-      }
-    );
-
     this.constructor.initLocale();
   }
 
@@ -111,20 +90,20 @@ class App extends Component {
     StatusBar.setBarStyle(barStyle);
   }
 
-  render() {
-    if (!this.state.rehydrated) {
-      return (
-        <Container>
-          <Logo source={require('./src/assets/logo-black.png')} />
-        </Container>
-      );
-    }
+  renderLogo = () => (
+    <Container>
+      <Logo source={require('./src/assets/logo-black.png')} />
+    </Container>
+  );
 
+  render() {
     return (
       <Provider store={configureStore}>
-        <GitPoint onNavigationStateChange={this.statusBarHandler}>
-          <StatusBar />
-        </GitPoint>
+        <PersistGate loading={this.renderLogo} persistor={persistor}>
+          <GitPoint onNavigationStateChange={this.statusBarHandler}>
+            <StatusBar />
+          </GitPoint>
+        </PersistGate>
       </Provider>
     );
   }

ios/GitPoint.xcodeproj/project.pbxproj

@@ -5,7 +5,6 @@
 	};
 	objectVersion = 46;
 	objects = {
-
 /* Begin PBXBuildFile section */
 		00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
 		00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };

package.json

@@ -96,7 +96,7 @@
     "redux-actions": "^2.2.1",
     "redux-devtools-extension": "^2.13.2",
     "redux-logger": "^2.7.4",
-    "redux-persist": "^4.3.1",
+    "redux-persist": "5.10.0",
     "redux-persist-transform-encrypt": "^1.0.2",
     "redux-thunk": "^2.2.0",
     "reselect": "^3.0.1",

root.store.js

@@ -1,12 +1,25 @@
 import { compose, createStore, applyMiddleware } from 'redux';
-import { autoRehydrate } from 'redux-persist';
+import { persistReducer, persistStore } from 'redux-persist';
+import createEncryptor from 'redux-persist-transform-encrypt';
+import md5 from 'md5';
+import DeviceInfo from 'react-native-device-info';
+import storage from 'redux-persist/lib/storage';
 import Reactotron from 'reactotron-react-native'; // eslint-disable-line import/no-extraneous-dependencies
 import createLogger from 'redux-logger';
 import reduxThunk from 'redux-thunk';
 import { composeWithDevTools } from 'redux-devtools-extension';
 import 'config/reactotron';
 import { rootReducer } from './root.reducer';
 
+const encryptor = createEncryptor({
+  secretKey: md5(DeviceInfo.getUniqueID()),
+});
+const persistConfig = {
+  key: 'root',
+  storage,
+  transforms: [encryptor],
+  whitelist: ['auth'],
+};
 const getMiddleware = () => {
   const middlewares = [reduxThunk];
 
@@ -19,26 +32,19 @@ const getMiddleware = () => {
   return applyMiddleware(...middlewares);
 };
 
-const getEnhancers = () => {
-  const enhancers = [];
-
-  enhancers.push(autoRehydrate());
-
-  return enhancers;
-};
-
 let store;
 
 if (__DEV__ && process.env.TRON_ENABLED) {
   store = Reactotron.createStore(
-    rootReducer,
-    compose(getMiddleware(), ...getEnhancers())
+    persistReducer(persistConfig, rootReducer),
+    compose(getMiddleware())
   );
 } else {
   store = createStore(
-    rootReducer,
-    composeWithDevTools(getMiddleware(), ...getEnhancers())
+    persistReducer(persistConfig, rootReducer),
+    composeWithDevTools(getMiddleware())
   );
 }
 
 export const configureStore = store;
+export const persistor = persistStore(configureStore);

yarn.lock

@@ -8392,14 +8392,9 @@ redux-persist-transform-encrypt@^1.0.2:
     json-stringify-safe "^5.0.1"
     readable-stream "^2.2.6"
 
-redux-persist@^4.3.1:
-  version "4.10.2"
-  resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-4.10.2.tgz#8efdb16cfe882c521a78a6d0bfdfef2437f49f96"
-  integrity sha512-U+e0ieMGC69Zr72929iJW40dEld7Mflh6mu0eJtVMLGfMq/aJqjxUM1hzyUWMR1VUyAEEdPHuQmeq5ti9krIgg==
-  dependencies:
-    json-stringify-safe "^5.0.1"
-    lodash "^4.17.4"
-    lodash-es "^4.17.4"
+redux-persist@5.10.0:
+  version "5.10.0"
+  resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-5.10.0.tgz#5d8d802c5571e55924efc1c3a9b23575283be62b"
 
 redux-thunk@^2.2.0:
   version "2.2.0"