my reducer functinos calls sometimes once, sometimes twice and i dont understand what is the problem.. :(

Question

my reducer functinos calls sometimes once, sometimes twice and i dont understand what is the problem.. :( My nodejs server sometimes gets 2 requests and sometimes one request but I only tell the app to send one request as soon as a button is pressed. i know i have a bad erorr handling, just tried to use context and reducer..

import AuthContext from "./AuthContext";
import React, { useCallback, useEffect, useReducer } from "react";
import axios from 'axios'

function AuthContextProvider(props) {

    const AuthManager = useCallback((state, action) => {
        if(action.type === "signup") {
            axios.post("http://localhost:3001/users/signup", {...action.payload}).then(res => res.data).then(data => {
                console.log(data);
                return {
                    login: true
                }
            })
        } else if(action.type === "login") {
            axios.post("http://localhost:3001/users/login", {...action.payload}).then(res => res.data).then(data => {
                console.log(data);
                return {
                    login: true,
                    user: data.user
                }
            })
        }

        
    }, [])

    const [state, dispatch] = useReducer(AuthManager, {
        login: false,
    })

    const authObject = {
        login: false,
        signupHandler: (account) => dispatch({type: 'signup',  payload: {...account}}),
        loginHandler: (account) => dispatch({type: 'login',  payload: {...account}}),

    }

    return <AuthContext.Provider value={authObject}>{props.children}</AuthContext.Provider>
}

export default AuthContextProvider

Answer 1

Where are you calling these actions? Also, why don't you take your reducer outside your component instead of using useCallback hook?

e.g: