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
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!