dispatch error missing response reactjs redux

Viewed 19

When I am proceeding to SignUp, LocalStorage is not working. When I look in the console, there is no error. When I check the network request, it is showing Pending. The backend is working properly, but still SignUp is not working.

My auth.js file code is :

const authReducer = (state= {data :null}, action) => {
   switch (action.type) {
    case 'AUTH':
        
        localStorage.setItem('Profile', JSON.stringify({...action?.data}));
        return { ...state, data: action?.data }
    default:
        return state;
   }
}

export default authReducer

My Auth.jsx file is where I am connecting everything. But when I call dispatch, it is not working. I am not even getting any errors in the console.

import React, {useState} from 'react'
import { useDispatch } from 'react-redux'
import {useNavigate} from 'react-router-dom'
import './Auth.css'
import icon from '../../assets/logo.svg'
import AboutAuth from './AboutAuth'
import { signup, login } from '../../actions/auth'

const Auth = () => {

    const [isSignup, setIsSignup] = useState(false)
    const [name, setName] = useState('')
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    const dispatch = useDispatch()
    const navigate = useNavigate()

    const handleSwitch = () => {
        setIsSignup(!isSignup)
    }

    const handleSubmit = (e) => {
        e.preventDefault()
        if(!email && !password){
            alert('Enter Email and Password')
        }
        if(isSignup){
            if(!name){
                alert("Enter A Name To Continue")
            }
            dispatch(signup({name, email, password}, navigate))
        }else{
            dispatch(login({email, password}, navigate))
        }
    }

  return (
    <div>
        <section className='auth-section'>
            {
                isSignup && <AboutAuth />
            }
            <div className='auth-container'>
                { !isSignup && <img src={icon} width='50px' alt='stack overflow' className='login-logo' /> }
                <form onSubmit={handleSubmit}>
                    {
                        isSignup && (
                            <label htmlFor='name'>
                                <h4>Display Name</h4>
                                <input type="text"  id='name' name='name' onChange={(e) => {setName(e.target.value)}} />
                            </label>
                        )
                    }
                    <label htmlFor="email">
                        <h4> Email </h4>
                        <input type="email" name='email' id='email' onChange={(e) => {setEmail(e.target.value)}} />
                    </label>
                    <label htmlFor="password">
                        <div style={{display:"flex", justifyContent:"space-between"}}>
                            <h4> Password </h4>
                          { !isSignup && <p style= {{color: "#007ac6", fontSize: '13px' }} >Forget Password</p> }
                        </div>
                        <input type="password" name='password' id='password' onChange={(e) => {setPassword(e.target.value)}}/>
                        { !isSignup && <p style = {{color: "#666767", fontSize:"13px"}}>The password must contain at least eight <br /> 
                        character categories among the following: <br />
                        Uppercase characters (A-Z)</p>}
                    </label>
                    {
                        isSignup && (
                            <label htmlFor='check'>
                                    <input type = "checkbox" id='check'/>
                                    <p style={{fontSize:"13"}}>
                                        opt-in to receive occasional <br />
                                        product updates, user research invitation, <br/>
                                        company announcment, and digests.
                                    </p>
                            </label>
                        )
                    }
                    <button type='submit' className='auth-btn'>{ isSignup ? 'Signup' : 'Log In'}</button>
                    {
                        isSignup && (
                            <p style = {{color: "#666767", fontSize:"13px"}}>
                                By Clicking "Sign Up", You Agree To Our <span style={{color: "#007ac6"}}>
                                    Terms Of <br />Services
                                </span>,<span style= {{color: "#007ac6"}}> Privacy Policy </span> And <span style= {{color: "#007ac6"}}>Cookie Policy</span> 
                            </p>
                        )
                    }
                                    <p>
                    {isSignup ? 'Already have an account?' : "Don't Have An Account ?"}
                    <button type='button' className ='handle-switch-btn'  onClick={handleSwitch}>{isSignup ? "Log In" : 'signup' }</button>
                </p>
                </form>
            </div>
        </section>
    </div>
  )
}

export default Auth
1 Answers

Does it ever hit within the case 'AUTH'?

Related