redux toolkit

package.json

@@ -12,6 +12,7 @@
         "@mui/icons-material": "^5.1.0",
         "@mui/lab": "^5.0.0-alpha.59",
         "@mui/material": "^5.1.0",
+        "@reduxjs/toolkit": "^1.8.6",
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^11.2.7",
         "@testing-library/react-hooks": "^7.0.2",

src/Actions/index.js

@@ -1,9 +0,0 @@
-import { SET_TOKEN } from "./types";
-
-// NOTE:
-// lista de acciones -> as reducer
-
-export const setToken = (payload) =>  ({
-  type : SET_TOKEN,
-  payload
-})

src/Actions/types.js

@@ -1 +0,0 @@
-export const SET_TOKEN = 'SET_TOKEN';

src/Pages/Logincs.jsx

@@ -2,10 +2,9 @@ import * as React from 'react';
 import toast, { Toaster } from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom'
 import jwt_decode from "jwt-decode";
-import { 
-  // useSelector,
-  useDispatch } from "react-redux";
-// import { connect } from 'react-redux';
+import { useSelector, useDispatch } from "react-redux";
+
+import { setToken } from '../Slices/tokenSlice'
 
 import {
   Paper, Box, Grid, Typography, TextField, Button, Avatar,
@@ -22,7 +21,7 @@ import { useFormik } from 'formik';
 import * as Yup from 'yup';
 
 import { Service } from '../Utils/HTTP.js'
-import { setToken } from '../Actions/index.js';
+// import { setToken } from '../Actions/index.js';
 
 const LoginSchema = Yup.object().shape({
   email: Yup
@@ -43,7 +42,7 @@ export function LoginCs() {
   let navigate = useNavigate()
 
   const [open, setOpen] = React.useState(false);
-  // const token = useSelector(state => state.token)
+  const token = useSelector(state => state.token)
   const dispatch = useDispatch();
   const handleClose = () => false
 
@@ -71,7 +70,7 @@ export function LoginCs() {
           let { token, nombre, apelidos, id: pass_id } = response;
           toast.success(`Bienvenido ${nombre} ${apelidos}!!`)
           token = token.replace("Bearer ", "")
-          console.log(token);
+          // console.log(token);
 
           // let { exp } = jwt_decode(token);
           let body_token = jwt_decode(token);
@@ -108,6 +107,7 @@ export function LoginCs() {
   });
 
   React.useEffect(() => {
+    console.log('TOKEN: ', token)
     if (auth.isLogged()) {
       return navigate('/user/home')
     }

src/Reducers/index.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux'
+import tokenReducer from '../Slices/tokenSlice.js';
+
+const rootReducer = combineReducers({
+  token : tokenReducer
+});
+
+export default rootReducer;

src/Reducers/token.js

@@ -1,12 +0,0 @@
-import { SET_TOKEN } from "../Actions/types"
-
-const initialState = { token : null }
-
-export const TokenReducer  = (state = initialState, action) => {
-  switch(action.type){
-    case SET_TOKEN:
-      return {...state, token: action.payload }
-    default:
-    return state;
-  }
-}

src/Slices/tokenSlice.js

@@ -0,0 +1,21 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = { token: null };
+
+export const tokenSlice = createSlice({
+  name: "token",
+  initialState,
+  reducers: {
+    setToken: (state, action) => {
+      state.token = action.payload;
+    },
+    removeToken: (state, _action) => {
+      state.token = null;
+    }
+  }
+})
+
+export const { setToken, removeToken } = tokenSlice.actions;
+console.log(tokenSlice)
+
+export default tokenSlice.reducer;

src/index.js

@@ -3,18 +3,21 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 
-import { TokenReducer  } from '../src/Reducers/token.js';
+import rootReducer from '../src/Reducers/';
 import { Provider } from 'react-redux';
 import { legacy_createStore as createStore } from 'redux';
 
-const store = createStore(TokenReducer)
+const store =
+  createStore(rootReducer,
+    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+  )
 
 ReactDOM.render(
-  <React.StrictMode>
-    <Provider store={store}>
+  <Provider store={store}>
+    <React.StrictMode>
       <App />
-    </Provider>
-  </React.StrictMode>,
+    </React.StrictMode>
+  </Provider>,
   document.getElementById('root')
 );