reactjs - Cannot Read "Data" from undefined, React Actions

Question

I am getting a consistent error from an auth.js file I created. The error below populates when using the Login button on my page. The flow was working previous to the addition of the auth.js file. Here is the file:

import api from '../utils/api';
import { setAlert } from './alert';
import {
  REGISTER_SUCCESS,
  REGISTER_FAIL,
  USER_LOADED,
  AUTH_ERROR,
  LOGIN_SUCCESS,
  LOGIN_FAIL,
  LOGOUT
} from './types';

// Load User
export const loadUser = () => async dispatch => {
  try {
    const res = await api.get('/auth');

    dispatch({
      type: USER_LOADED,
      payload: res.data
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR
    });
  }
};

// Register User
export const register = formData => async dispatch => {
  try {
    const res = await api.post('/users', formData);

    dispatch({
      type: REGISTER_SUCCESS,
      payload: res.data
    });
    dispatch(loadUser());
  } catch (err) {
    const errors = err.response.data.errors;

    if (errors) {
      errors.forEach(error => dispatch(setAlert(error.msg, 'danger')));
    }

    dispatch({
      type: REGISTER_FAIL
    });
  }
};

// Login User
export const login = (email, password) => async dispatch => {
  const body = { email, password } ;
  try {
    const res = await api.post('/auth', body);

    dispatch({
      type: LOGIN_SUCCESS,
      payload: res.data
    });

    dispatch(loadUser());
  } catch (err) {
    const errors = err.response.data.errors;

    if (errors) {
      errors.forEach(error => dispatch(setAlert(error.msg, 'danger')));
    }

    dispatch({
      type: LOGIN_FAIL
    });
  }
};

// Logout
export const logout = () => ({ type: LOGOUT });

Here is the error:

Unhandled Rejection (TypeError): Cannot read property 'data' of undefined
(anonymous function)
src/actions/auth.js:65
  62 | 
  63 |   dispatch(loadUser());
  64 | } catch (err) {
> 65 |   const errors = err.response.data.errors;
     | ^  66 | 
  67 |   if (errors) {
  68 |     errors.forEach(error => dispatch(setAlert(error.msg, 'danger')));

I am sincerely stumped on this one, Thank you all in advance for the help!

question from:https://stackoverflow.com/questions/65866691/cannot-read-data-from-undefined-react-actions

Answer 1

My solution was to delete redux from my entire project and use hooks.