Estoy tratando de implementar un sistema de autenticación en mi proyecto y he seguido este tutorial https://youtu.be/LKlO8vLvUao . El sistema funciona, sin embargo, estoy tratando de mostrar el mensaje de error en un intento de inicio de sesión fallido y no puedo encontrar la manera de obtener el mensaje de error del reductor al componente donde me gustaría mostrarlo (preferiblemente usando un [msg,setMsg ] gancho)
Aquí está mi código de la acción donde capturo la respuesta de error y la paso al reductor:
export const signin = (formData, history) => async (dispatch) => { try { const { data } = await API.signIn(formData); dispatch({ type: AUTH, data }); history.push('/') } catch (error){ const data = error.response.data; dispatch({ type: "AUTH_FAIL", data }) } }Aquí está mi reductor:
import { AUTH, LOGOUT } from '../constants/actionTypes' const authReducer = (state = { authData: null }, action) => { switch (action.type){ case AUTH: localStorage.setItem('profile', JSON.stringify({ ...action?.data })) return { ...state, authData: action?.data}; case LOGOUT: localStorage.clear(); return { ...state, authData: null }; case "AUTH_FAIL": return { ...state, authData: action?.data}; default: return state; } } export default authReducer;Cuando esté definiendo el estado de este reductor, divídalo en dos partes. Una es authData tal como está ahora y la segunda es error. Al enviar AUTH_FAIL , lo que debe devolver en el reductor es el error en lugar de authData. Ahora, en su componente, puede llamar al estado como quiera y usar el estado actualizado. Conozco 2 formas de hacer esto: 1-mapStatetoProps 2- store.subscribe() y store.getState()
En Reducer, crea un objeto de estado de initiateState .
const initiateState: { authData: null, error: null }como lo hiciste en acción
catch (error){ **const data = data.response.error;** dispatch({ type: "AUTH_FAIL", data }) } también cambie reducer y envíe la cantidad de action.data al error
const authReducer = (state = initiateState, action) => { ....//your code case "AUTH_FAIL": return { ...state, error: action.data}; default: return state; } } usando Hooks esto es igual a mapStateToProps
const error= useSelector((state) => state.error)