Persist user in session storage

This commit is contained in:
Kacper Donat 2020-07-18 16:53:48 +02:00
parent e9d0f6d348
commit f450a8dc4e
5 changed files with 60 additions and 29 deletions

View File

@ -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",

View File

@ -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,33 +81,35 @@ const LanguageSwitcher = ({ className, ...props }: HTMLProps<HTMLUListElement>)
function App() {
return (
<Provider store={ store }>
<StylesProvider injectFirst>
<MuiPickersUtilsProvider utils={ LocalizedMomentUtils } libInstance={ moment }>
<ThemeProvider theme={ studentTheme }>
<BrowserRouter>
<header className="header">
<div id="logo" className="header__logo">
<Link to={ route('home') }>
<img src="img/pg-logotyp.svg"/>
</Link>
</div>
<div className="header__nav">
<nav className="header__top">
<ul className="header__menu"></ul>
<UserMenu className="header__user"/>
<div className="header__divider" />
<LanguageSwitcher className="header__language-switcher"/>
</nav>
<nav className="header__bottom">
<ul className="header__menu header__menu--main"></ul>
</nav>
</div>
</header>
<Switch>{ routes.map(({ name, content, ...route }) => <Route { ...route } key={ name }>{ content() }</Route>) }</Switch>
</BrowserRouter>
</ThemeProvider>
</MuiPickersUtilsProvider>
</StylesProvider>
<PersistGate loading={ null } persistor={ persistor }>
<StylesProvider injectFirst>
<MuiPickersUtilsProvider utils={ LocalizedMomentUtils } libInstance={ moment }>
<ThemeProvider theme={ studentTheme }>
<BrowserRouter>
<header className="header">
<div id="logo" className="header__logo">
<Link to={ route('home') }>
<img src="img/pg-logotyp.svg"/>
</Link>
</div>
<div className="header__nav">
<nav className="header__top">
<ul className="header__menu"></ul>
<UserMenu className="header__user"/>
<div className="header__divider" />
<LanguageSwitcher className="header__language-switcher"/>
</nav>
<nav className="header__bottom">
<ul className="header__menu header__menu--main"></ul>
</nav>
</div>
</header>
<Switch>{ routes.map(({ name, content, ...route }) => <Route { ...route } key={ name }>{ content() }</Route>) }</Switch>
</BrowserRouter>
</ThemeProvider>
</MuiPickersUtilsProvider>
</StylesProvider>
</PersistGate>
</Provider>
);
}

View File

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

View File

@ -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;

View File

@ -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"