React Context API - dispatch is not a function

Question

Implementing a Log in system with React Context API. When submitted the form with user credentials, getting an error. Error:

Unhandled Rejection (TypeError): dispatch is not a function
        loginCall
        src/apiCalls.js:4
          1 | import axios from "axios";
          2 | 
          3 | export const loginCall = async (userCredential, dispatch) => {
        > 4 |   dispatch({ type: "LOGIN_START" });
          5 |   try {
          6 |     const res = await axios.post("auth/login", userCredential);
          7 |     dispatch({ type: "LOGIN_SUCCESS", payload: res.data });

Files: Login.jsx

import React, { useContext, useRef } from "react";
import bgImg from "../assets/login/tw-bg.png";
import "./styles/login.css";
import TwitterIcon from "@mui/icons-material/Twitter";
import { loginCall } from "../apiCalls";
import {AuthContext} from '../context/AuthContext'
function Login() {
  const email = useRef();
  const password = useRef();
  const context = useContext(AuthContext);
  const handleSubmit = (e) => {
    e.preventDefault();
    loginCall(
      { email: email.current.value, password: password.current.value },
      context.dispatch
    );
  };
  console.log(context.user)
  return (
    <div className="login-container">
      <div className="left">
        <TwitterIcon className="left-tw-icon" style={{ fontSize: 250 }} />
        <img src={bgImg} alt="background" className="login-background" />
      </div>
      <div className="right">
        <TwitterIcon className="right-tw-icon" color="primary" />
        <div className="main-title-container">
          <span className="main-title-span">Şu anda olup bitenler</span>
        </div>
        <div className="secondary-title-container">
          <span className="secondary-title-span">Twitter'a bugün katıl.</span>
        </div>
        <div className="form-container">
          <form onSubmit={handleSubmit}>
            <input type="email" placeholder="Username" ref={email} />
            <input type="password" placeholder="Password" ref={password} />
            <button type="submit">Log in</button>
          </form>
        </div>
      </div>
    </div>
  );
}

export default Login;

apiCalls.js

import axios from "axios";

export const loginCall = async (userCredential, dispatch) => {
  dispatch({ type: "LOGIN_START" });
  try {
    const res = await axios.post("auth/login", userCredential);
    dispatch({ type: "LOGIN_SUCCESS", payload: res.data });
  } catch (error) {
    dispatch({ type: "LOGIN_FAILURE", payload: error });
  }
};

AuthContext.js

import { Children, createContext, useReducer } from "react";
import AuthReducer from "./AuthReducer";

const INITIAL_STATE = {
  user: null,
  error: null,
  isFetching: false,
};

export const AuthContext = createContext(INITIAL_STATE);

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

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

Any help appreciated. Edit: AuthReducer and AuthActions added.

const AuthReducer = (state, action) => {
  switch (action.type) {
    case "LOGIN_START":
      return {
        user: null,
        error: null,
        isFetching: true,
      };
    case "LOGIN_FAILURE":
      return {
        user: null,
        error: action.payload,
        isFetching: false,
      };
    case "LOGIN_SUCCESS":
      return {
        user: action.payload,
        error: null,
        isFetching: false,
      };
  }
};


export default AuthReducer

```
export const  LOGIN_START = (userCredentials) =>  {
    type:"LOGIN_START"
}

export const  LOGIN_SUCCESS = (user) =>  ({
    type:"LOGIN_SUCCESS",
    payload:user
})

export const  LOGIN_FAILURE = (err) =>  ({
    type:"LOGIN_FAILURE",
})

```

Some comment to handle "mostly code error." It seems all clear to me. But the problem still continues. If there is a point I am missing, it would be great to learn from you. Thanks in advance.

Answer 1

you can try this:

import axios from "axios";

export const loginCall = (userCredential) => {
   return async (dispatch, getState) => {
  dispatch(LOGIN_START());
  try {
    const res = await axios.post("auth/login", userCredential);
    dispatch(LOGIN_SUCCESS(res.data);
  } catch (error) {
    dispatch(LOGIN_FAILURE());
  }
};

in your error you see this message:

dispatch is not a function
        loginCall
        src/apiCalls.js:4

it is quite straight forward. It tells you what the problem is which dispatch. it is loginCall and and loginCall is in apiCalls. try to focus on the error that you see. dispatch basically fires the function that you want to call. In your syntax, you put an object in the dispatch({some stuff}), but it actually expects you to call a function there.

I am not sure if my solution will fix everything but in the worst case, you should at least get a different error. :)