0

Estoy intentando de hacer un login y al momento de realizar el dispatch para cambiar el estado de checking: true hacia checking: false no se emite.

He revisado paso a paso y no logro encontrar mi error, espero alguien pueda ayudarme!!

Archivo principal

import { Provider } from 'react-redux'
import { AppRouter } from './routes/AppRouter';
import { store } from './store/store';


const CoffeApp = () => {
    return (
      <Provider store={ store }>
        <AppRouter />
      </Provider>
    );
  }
  
  export default CoffeApp; 

Configuración del store

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { rootReducer } from '../reducers/rootReducers';


const composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;

export const store = createStore(
    rootReducer,
    composeEnhancers(
        applyMiddleware( thunk )
    )
);

Configuración del rootReducer

import { combineReducers } from 'redux';
import { authReducer } from '../auth/authReducer';

// Aqui llegan todos los reducers
export const rootReducer = combineReducers({
    auth: authReducer
});

Configuración de los types

export const types = {

    // Types para el funcionamiento de la autenticación
    authChecking: '[auth] Checking login state',
    authCheckingFinish: '[auth] Finish checking login state',
    authStartLogin: '[auth] Start login',
    authLogin: '[auth] Login',
    authStartRegister: '[auth] Start Register',
    authStartStartTokenRenew: '[auth] Start token renew',
    authLogout: '[auth] Logout'
}

Acción de la autenticación

import { fetchSinToken } from '../helpers/fetch'
import { types } from '../types/types';

// Proceso de autenticación

// Recibe por argumento el correo y contrasenia
export const startLogin = ( correo, contrasenia ) => {

    return async( dispatch ) => {

        // Llamamos al fetch sin token
        const resp = await fetchSinToken( 'auth', { correo, contrasenia }, 'POST' );
        const body = await resp.json();

        console.log(body);

        // Si todo se realizo correctamente guardamos token el localStorage
        if( body.ok ) {
            localStorage.setItem( 'token', body.token );
            localStorage.setItem('token-init-date', new Date().getTime() );

            // Grabamos la informacion en el store
            dispatch( login({
                id: body.id,
                nombre: body.nombre
            }))
        }
    }
}

// Llamamos al type de login
const login = ( usuario ) => ({

    type: types.authLogin,
    payload: usuario

});

Configuración de authReducer

import { types } from '../types/types';

// El estado inicial de logeo es true
const initialState = {
    checking: true,
}

export const authReducer = ( state = initialState, action ) => {

    switch ( action.type ) {

        // Retornamos el estado, cambiamos el logeo a falso y retornamos el contenido
        case types.authLogin:
            
            return {
                ...state,
                checking: false,
                ...action.payload,
            }
    
        default:
            return state;
    }
}

Finalmente la pantalla del login

import React from 'react'
import { useDispatch } from 'react-redux';
import { Link } from 'react-router-dom'
import { useForm } from '../hooks/useForm';
import { startLogin } from '../actions/auth';

import './styles.css'



export const LoginScreen = () => {

    const dispatch = useDispatch();
    
    const [ formLoginValues, handleLoginInputChange ] = useForm({
        correo: '[email protected]',
        contrasenia: '1234567'
    });

    const { correo, contrasenia } = formLoginValues

    // Login de acceso
    const handleLogin = ( e ) => {
        // Prevenimos que la pagina recarge
        e.preventDefault();
        dispatch( startLogin( correo, contrasenia ) );
    }

    return (
        <>
            <form 
                onSubmit={ handleLogin }
                className="box" 
            >
                <h1>Iniciar sesión</h1>
                <input 
                    type="text" 
                    name="correo" 
                    placeholder="Email" 
                    value={ correo }
                    onChange={ handleLoginInputChange }
                />

                <input 
                    type="password" 
                    name="contrasenia" 
                    placeholder="Contraseña"
                    value={ contrasenia }
                    onChange={ handleLoginInputChange } 
                />

                <input 
                    type="submit" 
                    value="Login" 
                />

                <Link 
                    to="/register" 
                    className="link"
                >
                    Crear nuevo usuario
                </Link>
            </form>
        </>
    )
}

Adjunto imagenes de las herramientas de redux-web-tools

Herramientas de redux-web-tools

Y en consola obtengo la respuesta del backend

{usuario: {…}, token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjYsI…DgzfQ.Lrw-8UC5_PsHzke5rr2YBhmz9bmeytvRAYEY2OGL-Zw"} token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjYsImlhdCI6MTYyMTM3MjQ4MywiZXhwIjoxNjIxNDU4ODgzfQ.Lrw-8UC5_PsHzke5rr2YBhmz9bmeytvRAYEY2OGL-Zw" usuario: contrasenia: "$2a$10$Yi1Grp/A38DLXZ3ibdUW7eyPzM1FuO6g85MidVQ8FdEOe6jVeFREW" correo: "[email protected]" estado: true id: 6 nombre: "Paola" rol: "USUARIO"

Muchas gracias desde ya por tomarse el tiempo!

1 respuesta 1

0

Okay logre "resolverlo" pero no estoy seguro si lo que acabo de hacer es correcto

El punto es que en el auth.js ocurrian dos problemas.

  1. En la condición if(body.ok) parece ser que ocurria un error el cual no entiendo que lo provoca.

  2. Al momento de realizar el dispatch estaba llamando mal a los campos, por lo que recibia undefined.

El codigo que no me funciono es este:

export const startLogin = ( correo, contrasenia ) => {

    return async( dispatch ) => {

        // Llamamos al fetch sin token
        const resp = await fetchSinToken( 'auth', { correo, contrasenia }, 'POST' );
        const body = await resp.json();

        
        // Si todo se realizo correctamente guardamos token el localStorage
        if( body.ok ) {
            localStorage.setItem( 'token', body.token );
            localStorage.setItem('token-init-date', new Date().getTime() );
            
            // Grabamos la informacion en el store
            dispatch( login({
                id: body.id,
                nombre: body.nombre
            }))
        }
    }
}

Y luego de hacer unas modificaciones funciona "correctamente" asi:

export const startLogin = ( correo, contrasenia ) => {

    return async( dispatch ) => {

        // Llamamos al fetch sin token
        const resp = await fetchSinToken( 'auth', { correo, contrasenia }, 'POST' );
        const body = await resp.json();

        
        // Si todo se realizo correctamente guardamos token el localStorage
        if( body ) {
            localStorage.setItem( 'token', body.token );
            localStorage.setItem('token-init-date', new Date().getTime() );
            
            // Grabamos la informacion en el store
            dispatch( login({
                id: body.usuario.id,
                nombre: body.usuario.nombre
            }))
        }
    }
}

Al momento de seleccionar los campos no estaba entranado al objeto usuario, luego de corregir eso el token no se guardaba en el localstorage, no logre solucionarlo hasta quitar el body.ok de la condicion if.

Si alguien conoce una mejor respuesta estaria muy agradecido y si a alguien tiene un problema parecido espero esto se los solucione en lo que encuentro una mejor solucion.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.