浏览代码

persistent data

amenpunk 2 年之前
父节点
当前提交
9f07b7af65
共有 4 个文件被更改,包括 36 次插入2 次删除
  1. 4 0
      src/Components/User.jsx
  2. 3 1
      src/Slices/tokenSlice.js
  3. 22 0
      src/Utils/state.js
  4. 7 1
      src/index.js

+ 4 - 0
src/Components/User.jsx

1
 import React from 'react';
1
 import React from 'react';
2
 import { ThemeProvider, styled, createTheme } from '@mui/material/styles';
2
 import { ThemeProvider, styled, createTheme } from '@mui/material/styles';
3
 import '../Css/user.css'
3
 import '../Css/user.css'
4
+import { removeToken } from '../Slices/tokenSlice'
5
+import { useDispatch } from 'react-redux'
4
 
6
 
5
 import {
7
 import {
6
     Container, IconButton, Divider,
8
     Container, IconButton, Divider,
82
     const isMovil = Size('(max-width:770px)');
84
     const isMovil = Size('(max-width:770px)');
83
     const auth = useAuth();
85
     const auth = useAuth();
84
     const navigate = useNavigate()
86
     const navigate = useNavigate()
87
+    let dispatch = useDispatch()
85
 
88
 
86
     const CerrarSession = () => {
89
     const CerrarSession = () => {
90
+        dispatch(removeToken())
87
         auth.logout();
91
         auth.logout();
88
         navigate('/logincd')
92
         navigate('/logincd')
89
     }
93
     }

+ 3 - 1
src/Slices/tokenSlice.js

1
 import { createSlice } from '@reduxjs/toolkit';
1
 import { createSlice } from '@reduxjs/toolkit';
2
+// import Cookies from 'js-cookie'
2
 
3
 
3
-const initialState = { value: null };
4
+// let token = Cookies.get('token') ? Cookies.get('token') : null;
5
+const initialState = { token : null };
4
 
6
 
5
 export const tokenSlice = createSlice({
7
 export const tokenSlice = createSlice({
6
   name: "token",
8
   name: "token",

+ 22 - 0
src/Utils/state.js

1
+export const loadState = () => {
2
+  try {
3
+    const serializedData = localStorage.getItem('state')
4
+    if (serializedData === null) {
5
+      return undefined
6
+    }
7
+    let data = JSON.parse(serializedData)
8
+    console.log('data serializada', data)
9
+    return data
10
+  } catch (error) {
11
+    return undefined
12
+  }
13
+}
14
+
15
+export const saveState = (state) => {
16
+  try {
17
+    let serializedData = JSON.stringify(state)
18
+    localStorage.setItem('state', serializedData)
19
+  } catch (error) {
20
+    console.log('error saving state', error)
21
+  }
22
+}

+ 7 - 1
src/index.js

6
 import rootReducer from '../src/Reducers/';
6
 import rootReducer from '../src/Reducers/';
7
 import { Provider } from 'react-redux';
7
 import { Provider } from 'react-redux';
8
 import { configureStore } from '@reduxjs/toolkit';
8
 import { configureStore } from '@reduxjs/toolkit';
9
+import { loadState, saveState } from './Utils/state';
9
 // import { legacy_createStore as createStore } from '@reduxjs/toolkit';
10
 // import { legacy_createStore as createStore } from '@reduxjs/toolkit';
10
 // const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
11
 // const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
11
 
12
 
12
 let store = configureStore({
13
 let store = configureStore({
13
-  reducer : rootReducer
14
+  reducer : rootReducer,
15
+  preloadedState: loadState()
16
+})
17
+
18
+store.subscribe( function () {
19
+  saveState(store.getState())
14
 })
20
 })
15
 
21
 
16
 ReactDOM.render(
22
 ReactDOM.render(