install and configure redux-persist library

daostack · Nov 6, 2023 · 04881b8 · 04881b8
1 parent 7b163e7
commit 04881b8
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -64,6 +64,7 @@
     "react-virtualized": "^9.22.3",
     "react-zoom-pan-pinch": "^3.2.0",
     "redux": "^4.0.4",
+    "redux-persist": "^6.0.0",
     "redux-saga": "^1.1.3",
     "reselect": "^4.0.0",
     "slate": "^0.94.1",

diff --git a/src/pages/App/AppWrapper.tsx b/src/pages/App/AppWrapper.tsx
@@ -1,11 +1,14 @@
 import React, { FC } from "react";
 import { Provider } from "react-redux";
-import { store } from "@/shared/appConfig";
+import { PersistGate } from "redux-persist/integration/react";
+import { store, persistor } from "@/shared/appConfig";
 import { NotificationProvider } from "./providers";
 
 const AppWrapper: FC = ({ children }) => (
   <Provider store={store}>
-    <NotificationProvider>{children}</NotificationProvider>
+    <PersistGate loading={null} persistor={persistor}>
+      <NotificationProvider>{children}</NotificationProvider>
+    </PersistGate>
   </Provider>
 );
 

diff --git a/src/shared/appConfig.ts b/src/shared/appConfig.ts
@@ -1,6 +1,6 @@
 import configureStore from "@/store";
 import history from "./history";
 
-const { store } = configureStore(history);
+const { store, persistor } = configureStore(history);
 
-export { history, store };
+export { history, store, persistor };
diff --git a/src/store/store.tsx b/src/store/store.tsx
@@ -1,3 +1,5 @@
+import { routerMiddleware } from "connected-react-router";
+import { History } from "history";
 import {
   createStore,
   applyMiddleware,
@@ -6,14 +8,19 @@ import {
   Dispatch,
   Store,
 } from "redux";
-import { History } from "history";
-import { routerMiddleware } from "connected-react-router";
 import { composeWithDevTools } from "redux-devtools-extension";
 import freeze from "redux-freeze";
+import { persistStore, persistReducer, PersistConfig } from "redux-persist";
+import storage from "redux-persist/lib/storage";
 import createSagaMiddleware from "redux-saga";
-import { AppState } from '@/shared/interfaces';
-import appSagas from "./saga";
+import { AppState } from "@/shared/interfaces";
 import rootReducer from "./reducer";
+import appSagas from "./saga";
+
+const persistConfig: PersistConfig<AppState> = {
+  key: "root",
+  storage,
+};
 
 const sagaMiddleware = createSagaMiddleware();
 let middleware: Array<Middleware>;
@@ -28,52 +35,65 @@ if (process.env.NODE_ENV === "development") {
   composer = compose;
 }
 
-const errorHandlerMiddleware: Middleware = () => (next: Dispatch) => (action) => {
-  if (action.type.includes("FAILURE")) {
-    // next(
-    //   showNotification({
-    //     message: action.payload.error || action.payload.message,
-    //     appearance: "error",
-    //   }),
-    // );
+const errorHandlerMiddleware: Middleware =
+  () => (next: Dispatch) => (action) => {
+    if (action.type.includes("FAILURE")) {
+      // next(
+      //   showNotification({
+      //     message: action.payload.error || action.payload.message,
+      //     appearance: "error",
+      //   }),
+      // );
 
-    if (action.payload && (action.payload.code === 401 || action.payload.code === 403)) {
-      localStorage.clear();
+      if (
+        action.payload &&
+        (action.payload.code === 401 || action.payload.code === 403)
+      ) {
+        localStorage.clear();
+      }
     }
-  }
 
-  if (action.type.includes("SUCCESS") && action.payload && action.payload.message) {
-    // next(
-    //   showNotification({
-    //     message: action.payload.message,
-    //     appearance: "success",
-    //   }),
-    // );
-  }
+    if (
+      action.type.includes("SUCCESS") &&
+      action.payload &&
+      action.payload.message
+    ) {
+      // next(
+      //   showNotification({
+      //     message: action.payload.message,
+      //     appearance: "success",
+      //   }),
+      // );
+    }
 
-  return next(action);
-};
+    return next(action);
+  };
+// defaults to localStorage for web
 
 export default function configureStore(history: History) {
+  const persistedReducer = persistReducer(persistConfig, rootReducer(history));
   const store: Store<AppState> = createStore(
-    rootReducer(history),
+    persistedReducer,
     undefined,
     composer(
       applyMiddleware(
         ...middleware,
         routerMiddleware(history),
-        errorHandlerMiddleware
-      )
-    )
+        errorHandlerMiddleware,
+      ),
+    ),
   );
+  const persistor = persistStore(store);
 
   sagaMiddleware.run(appSagas);
 
   // eslint-disable-next-line
   if ((module as any).hot) {
     // eslint-disable-next-line
-    (module as any).hot.accept(() => store.replaceReducer(rootReducer(history)));
+    (module as any).hot.accept(() =>
+      store.replaceReducer(persistedReducer as any),
+    );
   }
 
-  return { store };
+  return { store, persistor };
 }
diff --git a/yarn.lock b/yarn.lock
@@ -17145,6 +17145,11 @@ redux-freeze@^0.1.7:
   dependencies:
     deep-freeze-strict "1.1.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-saga@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/redux-saga/-/redux-saga-1.1.3.tgz#9f3e6aebd3c994bbc0f6901a625f9a42b51d1112"