Persist user in session storage

package.json

@@ -16,6 +16,7 @@
     "@types/react-redux": "^7.1.9",
     "@types/react-router-dom": "^5.1.5",
     "@types/redux": "^3.6.0",
+    "@types/redux-persist": "^4.3.1",
     "@typescript-eslint/eslint-plugin": "^2.10.0",
     "@typescript-eslint/parser": "^2.10.0",
     "babel-core": "^6.26.3",
@@ -47,6 +48,7 @@
     "react-router-dom": "^5.2.0",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
+    "redux-persist": "^6.0.0",
     "sass-loader": "8.0.2",
     "style-loader": "0.23.1",
     "ts-loader": "^7.0.5",

src/app.tsx

@@ -7,7 +7,7 @@ import { BrowserRouter, Link, Route, Switch } from "react-router-dom"
 import moment, { Moment } from "moment";
 import { route, routes } from "@/routing";
 import { Provider, useDispatch, useSelector } from "react-redux";
-import store from "@/state/store";
+import store, { persistor } from "@/state/store";
 import { AppState } from "@/state/reducer";
 import { StudentAction, StudentActions } from "@/state/actions/student";
 import { sampleStudent } from "@/provider/dummy/student";
@@ -20,6 +20,7 @@ import '@/styles/overrides.scss'
 import '@/styles/header.scss'
 import classNames from "classnames";
 import { Button } from "@material-ui/core";
+import { PersistGate } from 'redux-persist/integration/react';
 
 moment.locale("pl")
 
@@ -80,6 +81,7 @@ const LanguageSwitcher = ({ className, ...props }: HTMLProps<HTMLUListElement>)
 function App() {
     return (
         <Provider store={ store }>
+            <PersistGate loading={ null } persistor={ persistor }>
                 <StylesProvider injectFirst>
                     <MuiPickersUtilsProvider utils={ LocalizedMomentUtils } libInstance={ moment }>
                         <ThemeProvider theme={ studentTheme }>
@@ -107,6 +109,7 @@ function App() {
                         </ThemeProvider>
                     </MuiPickersUtilsProvider>
                 </StylesProvider>
+            </PersistGate>
         </Provider>
     );
 }

src/state/reducer/index.ts

@@ -1,4 +1,5 @@
 import { combineReducers } from "redux";
+
 import studentReducer from "./student"
 
 const rootReducer = combineReducers({

src/state/store.ts

@@ -1,7 +1,20 @@
 import { createStore } from "redux";
 import rootReducer from "@/state/reducer";
 import { devToolsEnhancer } from "redux-devtools-extension";
+import { persistReducer, persistStore } from "redux-persist"
+import sessionStorage from "redux-persist/lib/storage/session"
 
-const store = createStore(rootReducer, devToolsEnhancer({ }));
+const store = createStore(
+    persistReducer(
+        {
+            key: 'state',
+            storage: sessionStorage
+        },
+        rootReducer
+    ),
+    devToolsEnhancer({})
+);
+
+export const persistor = persistStore(store)
 
 export default store;

yarn.lock

@@ -1245,6 +1245,13 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/redux-persist@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@types/redux-persist/-/redux-persist-4.3.1.tgz#aa4c876859e0bea5155e5f7980e5b8c4699dc2e6"
+  integrity sha1-qkyHaFngvqUVXl95gOW4xGmdwuY=
+  dependencies:
+    redux-persist "*"
+
 "@types/redux@^3.6.0":
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/@types/redux/-/redux-3.6.0.tgz#f1ebe1e5411518072e4fdfca5c76e16e74c1399a"
@@ -7498,6 +7505,11 @@ redux-devtools-extension@^2.13.8:
   resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1"
   integrity sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg==
 
+redux-persist@*, 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@*, redux@^4.0.0, redux@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"