React Redux, "return" is not working in a specific Redux Action function when returning a function

Question

I'm trying to update a customer's name using React-Redux. This is my component code:

import React, { useEffect, useState } from "react";
import { Link, Navigate, useParams } from 'react-router-dom';
import { connect } from 'react-redux';
import { customerDetail, deleteCustomer, updateCustomer } from "../../redux";

const CustomerDetail = ( {customerDetail, userData} ) => {

    let actionType = ''

    const { cid } = useParams()

    useEffect(() => {
        customerDetail(cid)
    }, [])

    const [formData, setFormData] = useState({
        customer_name: ''
    });

    const { customer_name } = formData;

    const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value });

    const onClick = e => {
        actionType = e.target.name;
    }

    const onSubmit = e=> {
        e.preventDefault();
        console.log('submit clicked')
        actionType === 'update' ? updateCustomer(cid, customer_name) : deleteCustomer();
    };

    return userData ? (
        <div>
            <form onSubmit={e => onSubmit(e)}>
                <table className="table">
                    <thead>
                        <tr>
                            <th scope="col">ID</th>
                            <th scope="col">Customer Name</th>
                            <th scope="col">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{userData.id}</td>
                            <td>
                                <input 
                                placeholder={userData.customer_name}
                                className='form-control'
                                id="exampleInputCustomerName"
                                name="customer_name"
                                value={customer_name}
                                onChange={e => onChange(e)}
                                >
                                </input>
                            </td>
                            <td>
                                <button 
                                type="submit" 
                                name="update"
                                className="btn btn-primary"
                                onClick={e => onClick(e)}
                                >Update
                                </button>
                                <button 
                                type="submit" 
                                name="delete"
                                className="btn btn-danger"
                                onClick={e => onClick(e)}
                                >Delete
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
    ) : (
        <div>
            Please login first
        </div>
    )
};

const mapStateToProps = state => ({
    // is authenticated?
    isAuthenticated: state.auth.isAuthenticated,
    userData: state.customer.customer
})

const mapDispatchToProps = dispatch => {
    return {
        customerDetail: cid => dispatch(customerDetail(cid)),
        updateCustomer: (customer_name, cid) => dispatch(updateCustomer(cid, customer_name)),
        deleteCustomer: () => dispatch(deleteCustomer())
    }
}

export default connect(mapStateToProps, mapDispatchToProps) (CustomerDetail);

The function that has problem is updateCustomer function

This is the code snippet of updateCustomer function:

    export const updateCustomer = (cid, customer_name) => {
    console.log("Update action called")
    console.log(cid)
    console.log(customer_name)
    return (dispatch) => {
        console.log('dispatch called')
        const config = {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `JWT ${localStorage.getItem('access')}`,
                'Accept': 'application/json'
            }
        }
        const body = JSON.stringify({ customer_name });
        console.log(body)
        dispatch(updateCustomersRequest)
        axios.put(`${process.env.REACT_APP_API_URL}/api/users/${cid}/`, body, config)
        .then(response => {
            const users = response.data
            console.log(response)
            dispatch(updateCustomersSuccess(users))
        })
        .catch(error => {
            const errorMsg = error.message
            dispatch(updateCustomersFailure(errorMsg))
        })
    }
}

I can view cid, customer_name, and "Update action called" in my terminal, but I can't view "dispatch called" in my terminal. My other action functions work well, this makes me feel really confused.

If I change the return function to only return console.log(), I can view it then. I feel like I just can't return a function in this action.

Answer 1

I got it. I forgot to add my action in the header of this component. But I really don't know the error would be like this. This is a good lesson for me...