reactjsreduxreact-reduxredux-form

react redux axios post signup request


I'm learning redux, I'm trying to create a registration form. When I send my form nothing happens. Can you tell me if the development of the action and the reducer and service are well done?I have the impression that no data goes into the action or maybe I'm doing something wrong with axios. I tried with FormData() for axios but still the same result. thanks in advance

action auth

export const registerClient = (dispatch, lastname,firstname,adress,codePostal,city,country,phone,email,password, isLoggedIn)=>{
    const data = (lastname,firstname,adress,codePostal,city,country,phone,email,password, isLoggedIn)
        dispatch({
            type: ActionTypes.REGISTER_SUCCESS,
            payload: {client: data}
        })   
}

Reducer auth

export default function AuthClient (state = initialState, action){
    const {type, payload} = action;
    switch (type) {
        case ActionTypes.LOGIN_SUCCESS:
            return {
                ...state,
                isLoggedIn: true,
                client: payload.client
            }
    
        case ActionTypes.LOGIN_FAIL:
            return {
                ...state,
                isLoggedIn: false,
                client: null
            }

        case ActionTypes.REGISTER_SUCCESS:
            console.log(payload)
            return {
                ...state,
                isLoggedIn: true,
                client: payload.client
            }

        case ActionTypes.REGISTER_FAIL:
            return {
                ...state,
                isLoggedIn: false,
            }

        case ActionTypes.LOGOUT:
            return {
                ...state,
                isLoggedIn: false,
                client: null,
            }
        default:
            return state;
    }
}

Service


export const registerService = (lastname,firstname,adress,codePostal,city,country, navigate,phone,email,password, isLoggedIn, dispatch) =>{
    
    axios.post(API_URL_CLIENT_AUTH + "createClient",{     
        lastname,
        firstname,
        adress,
        codePostal,
        city,
        country,
        phone,
        email,
        password
})
    .then((response)=>{
        actionAuth.registerClient(lastname,firstname,adress,codePostal,city,country, 
        navigate,phone,email,password,dispatch)

        localStorage.setItem("client", JSON.stringify(response.data))
        return response
    })
    .catch((error)=>{
        const errorFailRegister = error
        failRegisterClient(dispatch)
        errorAction(errorFailRegister,dispatch)
    })
}

Solution

  • I will rewrite your action, cause it's not well defined:

    export const registerClient = (lastname, firstname, address, codePostal, city, country, phone, email, password, isLoggedIn) => {
        // ** here remove the dispatch
        return {
            type: ActionTypes.REGISTER_SUCCESS,
            payload: {
                client: {
                    lastname,
                    firstname,
                    address,
                    codePostal,
                    city,
                    country,
                    phone,
                    email,
                    password,
                    isLoggedIn,
                }
            }
        }
    }

    Your reducer is fine. Last change is in the service:

    export const registerService = (lastname, firstname, adress, codePostal, city, country, navigate, phone, email, password, isLoggedIn, dispatch) => {
    
        axios.post(API_URL_CLIENT_AUTH + "createClient", {
            lastname,
            firstname,
            adress,
            codePostal,
            city,
            country,
            phone,
            email,
            password
        })
            .then((response) => {
                // ** here, call the dispatch
                dispatch(actionAuth.registerClient(lastname, firstname, adress, codePostal, city, country,
                    navigate, phone, email, password, dispatch))
                
                localStorage.setItem("client", JSON.stringify(response.data)) // You can do this later with a middleware, when you're ready
                // for that
                return response
            })
            .catch((error) => {
                const errorFailRegister = error
                failRegisterClient(dispatch)
                errorAction(errorFailRegister, dispatch)
            })
    }

    So, explaining: 'dispatch' is to tell redux to run an action, so the action itself cannot call the dispatch function. You can call dispatch in the client of the redux store you are building