Persist redux state in browser (#1178)

* persist redux state Signed-off-by: Eric Wei <[email protected]> * switch to session storage Signed-off-by: Eric Wei <[email protected]> Signed-off-by: Eric Wei <[email protected]>
opensearch-project · Nov 2, 2022 · 2231234 · 2231234
1 parent 284db6c
commit 2231234
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -26,7 +26,8 @@
     "postinstall": "^0.7.4",
     "react-graph-vis": "^1.0.5",
     "react-paginate": "^8.1.3",
-    "react-plotly.js": "^2.5.1"
+    "react-plotly.js": "^2.5.1",
+    "redux-persist": "^6.0.0"
   },
   "devDependencies": {
     "@cypress/skip-test": "^2.6.1",

diff --git a/public/framework/redux/store/index.ts b/public/framework/redux/store/index.ts
@@ -5,21 +5,45 @@
 
 import { configureStore } from '@reduxjs/toolkit';
 import rootReducer from '../reducers';
+import storage from 'redux-persist/lib/storage/session';
+import {
+  persistStore,
+  persistReducer,
+  FLUSH,
+  REHYDRATE,
+  PAUSE,
+  PERSIST,
+  PURGE,
+  REGISTER,
+} from 'redux-persist';
+
+const persistConfig = {
+  key: 'root',
+  storage,
+};
+
+const persistedReducer = persistReducer(persistConfig, rootReducer);
 
 const store = configureStore({
-  reducer: rootReducer,
-  middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
+  reducer: persistedReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+      },
+    }),
   devTools: process.env.NODE_ENV !== 'production',
   enhancers: [],
 });
 
 if (process.env.NODE_ENV === 'development' && module.hot) {
   module.hot.accept('./rootReducer', () => {
-    const newRootReducer = require('./rootReducer').default;
-    store.replaceReducer(newRootReducer);
+    store.replaceReducer(persistReducer(persistConfig, require('./rootReducer').default));
   });
 }
 
 export type AppDispatch = typeof store.dispatch;
 
+export const persistor = persistStore(store);
+
 export default store;
diff --git a/yarn.lock b/yarn.lock
@@ -2387,6 +2387,11 @@ readable-stream@^2.2.2:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
+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-thunk@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"