persistent data

src/Components/User.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { ThemeProvider, styled, createTheme } from '@mui/material/styles';
 import '../Css/user.css'
+import { removeToken } from '../Slices/tokenSlice'
+import { useDispatch } from 'react-redux'
 
 import {
     Container, IconButton, Divider,
@@ -82,8 +84,10 @@ export function User() {
     const isMovil = Size('(max-width:770px)');
     const auth = useAuth();
     const navigate = useNavigate()
+    let dispatch = useDispatch()
 
     const CerrarSession = () => {
+        dispatch(removeToken())
         auth.logout();
         navigate('/logincd')
     }

src/Slices/tokenSlice.js

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

src/Utils/state.js

@@ -0,0 +1,22 @@
+export const loadState = () => {
+  try {
+    const serializedData = localStorage.getItem('state')
+    if (serializedData === null) {
+      return undefined
+    }
+    let data = JSON.parse(serializedData)
+    console.log('data serializada', data)
+    return data
+  } catch (error) {
+    return undefined
+  }
+}
+
+export const saveState = (state) => {
+  try {
+    let serializedData = JSON.stringify(state)
+    localStorage.setItem('state', serializedData)
+  } catch (error) {
+    console.log('error saving state', error)
+  }
+}

src/index.js

@@ -6,11 +6,17 @@ import App from './App';
 import rootReducer from '../src/Reducers/';
 import { Provider } from 'react-redux';
 import { configureStore } from '@reduxjs/toolkit';
+import { loadState, saveState } from './Utils/state';
 // import { legacy_createStore as createStore } from '@reduxjs/toolkit';
 // const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
 
 let store = configureStore({
-  reducer : rootReducer
+  reducer : rootReducer,
+  preloadedState: loadState()
+})
+
+store.subscribe( function () {
+  saveState(store.getState())
 })
 
 ReactDOM.render(