Unable to dispatch context

As in the login component I was unable to dispatch action it gives error of

caught (in promise) TypeError: dispatch is not a function
at handleLogin (Login.jsx:22:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
at executeDispatch (react-dom.development.js:9041:1)
at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
at processDispatchQueue (react-dom.development.js:9086:1)
at dispatchEventsForPlugins (react-dom.development.js:9097:1)
at react-dom.development.js:9288:1
h

login.jsx

import './login.scss'
import React, { useContext, useState } from 'react'
import CloseIcon from '@mui/icons-material/Close'
import RemoveRedEyeOutlinedIcon from '@mui/icons-material/RemoveRedEyeOutlined'
import { AuthContext } from '../../context/authContext/AuthContext'
import { login } from '../../apicalls'
import axios from 'axios'
import {
  loginFailure,
  loginStart,
  loginSuccess,
} from '../../context/authContext/AuthActions'

const Login = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const { isFetching, dispatch } = useContext(AuthContext)

  const handleLogin = async (e) => {
    e.preventDefault()
    //login({ email, password }, dispatch)
    dispatch(loginStart())
    try {
      const res = await axios.post(
        process.env.REACT_APP_API_URL + 'auth/login',
        { email, password }
      )
      dispatch(loginSuccess(res.data))
      console.log(res)
    } catch (error) {
      dispatch(loginFailure())
    }
  }

  return (
    <div className='login'>
      <div className='loginWrapper'>
        <div className='loginLevelOne'>
          <span className='loginSignInTitle'>Signin</span>
          <CloseIcon className='loginCloseIcon' />
        </div>

        <div className='loginLevelTwo'>
          <div className='loginLevelTwoLogo'>
            <img
              className='loginLevelTwoImg'
              src='https://www.cipherschools.com/static/media/Cipherschools_icon@2x.3b571d743ffedc84d039.png'
              alt=''
            />
            <span className='loginLevelTwoHeader'>CipherSchool</span>
          </div>
          <span className='loginLevelTwoWelcome'>Hey, Welcome!</span>
          <span className='loginLevelTwoSigin'>
            Please provide your email and password to signin
          </span>
        </div>

        <div className='loginLevelThree'>
          <div className='loginLevelThreeInputItem'>
            <input
              onChange={(e) => setEmail(e.target.email)}
              type='text'
              name='email'
              placeholder='E-mail ID'
              className='loginLevelThreeInput'
            />
          </div>
          <div
            className='loginLevelThreeInputItem'
            style={{ display: 'flex', alignItems: 'center' }}
          >
            <input
              onChange={(e) => setPassword(e.target.email)}
              type='password'
              name='password'
              placeholder='Password'
              className='loginLevelThreeInput'
            />
            <RemoveRedEyeOutlinedIcon className='loginShowIcon' />
          </div>
        </div>

        <div className='loginLevelFour'>
          <span className='forgetPasswordText'>Forgot Password ?</span>
          <button
            className='loginBtn'
            onClick={handleLogin}
            disabled={isFetching}
          >
            Signin
          </button>
          <div className='registerText'>
            <span className='loginDontText'>Don't have account ?</span>
            <span className='loginStartedText'>Get Started</span>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Login

AuthContext

import { createContext, useEffect } from 'react'
import AuthReducer from './AuthReducer'
import { useReducer } from 'react'

const INITIAL_STATE = {
  user: JSON.stringify(localStorage.getItem('user')) || null,
  isFetching: false,
  error: false,
}

export const AuthContext = createContext(INITIAL_STATE)

export const AuthContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(AuthReducer, INITIAL_STATE)

  useEffect(() => {
    localStorage.setItem('user', JSON.stringify(state.user))
  }, [state.user])

  return (
    <AuthContext.Provider
      value={{
        user: state.user,
        isFetching: state.isFetching,
        error: state.error,
        dispatch,
      }}
    >
      {children}
    </AuthContext.Provider>
  )
}

You have defined AuthContext:

How can you destructure a dispatch property if none is defined…

Hope this helps

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.