I’m trying to make the errors appeared on the console, at the moment, when i have successfully registered, the console logs all the information of username, email, password and confirmpassword and announced “Signup successfully!”, but when i’ve registered failed, the console did not log the errors.

I have these 4 files: actionSignup.js, reducerSignup.js, Signup.js and the saga generator function signupFormsaga which provided in my whole saga project.

1. actionSignup.js:

import { SIGNUP_FORM, SIGNUP_FORM_SUCCESS, SIGNUP_FORM_FAILURE, RESET_SIGNUP_FORM } from "./constant";

export const signupForm = (username, email, password, confirmpassword) => ({
    type: SIGNUP_FORM,
    payload: { username, email, password, confirmpassword},
  });
  
  export const signupFormSuccess = () => ({
    type: SIGNUP_FORM_SUCCESS,
  });
  
  export const signupFormFailure = (errors) => ({
    type: SIGNUP_FORM_FAILURE,
    payload: errors,
  });

  export const resetSignupState = () => ({
      type: RESET_SIGNUP_FORM,
  });

2. reducerSignup.js:

import { SIGNUP_FORM_SUCCESS, SIGNUP_FORM_FAILURE, SIGNUP_FORM, RESET_SIGNUP_FORM } from "./constant";

const initialState = {
  username: '',
  email: '',
  password: '',
  confirmpassword: '',
  errors: {},
  isSignedUp: false,
};

const reducerSignup = (state = initialState, action) => {
  switch (action.type) {
    case SIGNUP_FORM:
return {...state, errors:{}};
    case SIGNUP_FORM_SUCCESS:
      return { ...state, errors: {}, isSignedUp: true };
    case SIGNUP_FORM_FAILURE:
      return { ...state, errors: action.payload, isSignedUp: false };
    case RESET_SIGNUP_FORM:
        return initialState;
    default:
      return state;
  }
};

export default reducerSignup;

3. Signup.js:

import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { signupForm, resetSignupState, signupFormFailure } from '../redux/actionSignup';
import { useNavigate } from 'react-router-dom';

const Signup = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { isSignedUp, errors: signupErrors} = useSelector((state) => state.signup);

  const [formData, setFormData] = useState({ //ok
    username: '',
    email: '',
    password: '',
    confirmpassword: '',
  });

  const handleChange = (e) => { //ok
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const validateForm = () => { //ok
    const newErrors = {};
    if (!formData.username.trim()) {
      newErrors.username = 'Username is not valid';
    }
    if (!formData.email.includes('@gmail.com')) {
      newErrors.email = 'Invalid email!';
    }
    if (formData.password.length < 8) {
      newErrors.password = 'Password must be at least 8 characters!';
    }
    if (formData.password !== formData.confirmpassword) {
      newErrors.confirmpassword = 'Password does not match!';
    }
    return newErrors;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const newErrors = validateForm();
    if (Object.keys(newErrors).length > 0) {
      dispatch(signupFormFailure(newErrors));
    } else {
      dispatch(signupForm( formData.username, formData.email, formData.password, formData.confirmpassword));
    }
  };

  useEffect(() => {
    if (isSignedUp) {
      setFormData({
        username: '',
        email: '',
        password: '',
        confirmpassword: '',
      });
      dispatch(resetSignupState());
      navigate('/login');
    }
  }, [isSignedUp, dispatch, navigate]);


  return (
    <div className='signup-template d-flex justify-content-center align-items-center vh-100'>
      <div className='signupform-container p-5 rounded'>
        <form onSubmit={handleSubmit}>
          <h1 className='text-center signup-title'>Sign Up</h1>

          <div className='text-start mb-2'>
            <label htmlFor='username' className='signup-props'>Username</label>
            <input
              type='text'
              placeholder='Enter Username'
              className='form-control signup-list color-background'
              style={{ border: '1.4px solid black' }}
              id='username'
              name='username'
              value={formData.username}
              onChange={handleChange}
            />
            {signupErrors.username && <div className='error' style={{ color: 'crimson' }}>{signupErrors.username}</div>}
          </div>

          <div className='text-start mb-2'>
            <label htmlFor='email' className='signup-props'>Email</label>
            <input
              type='email'
              placeholder='Enter Email'
              className='form-control signup-list color-background'
              style={{ border: '1.4px solid black' }}
              id='email'
              name='email'
              value={formData.email}
              onChange={handleChange}
            />
            {signupErrors.email && <div className='error' style={{ color: 'crimson' }}>{signupErrors.email}</div>}
          </div>

          <div className='text-start mb-2'>
            <label htmlFor='password' className='signup-props'>Password</label>
            <input
              type='password'
              placeholder='Enter Password'
              className='form-control signup-list color-background'
              style={{ border: '1.4px solid black' }}
              id='password'
              name='password'
              value={formData.password}
              onChange={handleChange}
            />
            {signupErrors.password && <div className='error' style={{ color: 'crimson' }}>{signupErrors.password}</div>}
          </div>

          <div className='text-start mb-2'>
            <label htmlFor='confirmpassword' className='signup-props'>Confirm Password</label>
            <input
              type='password'
              placeholder='Confirm Password'
              className='form-control signup-list color-background'
              style={{ border: '1.4px solid black' }}
              id='confirmpassword'
              name='confirmpassword'
              value={formData.confirmpassword}
              onChange={handleChange}
            />
            {signupErrors.confirmpassword && <div className='error' style={{ color: 'crimson' }}>{signupErrors.confirmpassword}</div>}
          </div>

          <div className='text-center mt-3 signup-buttonsz'>
            <button type='submit' className='signup-button' name='submit'>
              Submit
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default Signup;

4. signupFormSaga:

function* signupFormSaga(action) {
  const { username, email, password, confirmpassword } = action.payload;

  console.log('Payload:', action.payload);
  console.log('Username:', username);
  console.log('Email:', email);
  console.log('Password:', password);
  console.log('Confirm Password:', confirmpassword);

  try {
    yield put(signupFormSuccess());
    console.log('Signed up successfully!');
  } catch (error) {
    console.error('Error during signup:', error);
    const errors = { general: 'Signup process encountered an error' };
    yield put(signupFormFailure(errors));
    console.log('Signed up failed!');
  }
}



yield takeLatest(SIGNUP_FORM, signupFormSaga);