action is not dispatching in react-redux

Question

I have a form that collect data about today's expenditure and total users(as attendances) and then submit it using redux dispatch via action addExpenses(). But it douse not run. It seem that it is not counting if it is present or not.

function TodayExpenses() {
    const dispatch = useDispatch()
    const navigate = useNavigate()

    useEffect(() => {
        dispatch(getAttendance());


    }, [date, getAttendanceObj, dispatch, addExpenses])

    const [todayExpenses, setTodayExpenses] = useState(0)
    const { attendance: getAttendanceObj, error: getAttendanceError, loading: getAttendanceLoading } = useSelector(state => state.getAttendance)

    const { success } = useSelector(state => state.addExpenses)
    const submitHandler = (e) => {
        e.preventDefault();
        
        let expenses = {
            date: date,
            total_attendances: count,
            expenses_per_day: todayExpenses,
            expenses_per_attendance: expensePerAttendance,
        }
        dispatch(addExpenses(expenses)) // Here be the dragons

        console.log(todayExpenses)


    }



    const today = new Date().toISOString().substr(0, 10);
    const [date, setDate] = useState(today)
    const count = counter(getAttendanceObj, date)


    const expensePerAttendance = (todayExpenses / count).toFixed(2);
    return (
        <div className="container">
            <div class="h1 text-center text-dark" id="pageHeaderTitle">
                Enter <input type="date" id="date" value={date} onChange={(e) => setDate(e.target.value)} max={today} />'s Expenses
            </div>
            <div className="row">
                <div className="col-md-6 mx-auto">
                    <div className="card card-body">

                        <form onSubmit={submitHandler}>


                            <label htmlFor="name">Today's Expenses:</label>
                            <input
                                type="number"
                                className="form-group"
                                id="name"
                                placeholder="Enter value"
                                value={todayExpenses}
                                onChange={(e) => setTodayExpenses(e.target.value)}
                            />

                            <ul class="list-group list-group-flush">
                                <label class="list-group-item  card-header">Total Attendances</label>
                                <li class="list-group-item">{count}</li>

                                <label class="list-group-item  card-header">Expense Per Attendance</label>
                                <li class="list-group-item">{expensePerAttendance}</li>
                            </ul>

                            <button type="submit" className="btn btn-primary">
                                Submit
                            </button>



                        </form>

                    </div>
                </div>
            </div>
        </div>
    );
}

export default TodayExpenses;

What I have tried so far

What not? I tried console.log()even inside action but it working just above the required script ( I mean where the action have submit the data) . if wanna ask here is action

export const addExpenses = (expenses) => async (getState, dispatch) => {


    try {

        dispatch({
            type: ADD_EXPENSES_REQUEST
        })

        console.log("data:", dispatch({
            type: ADD_EXPENSES_SUCCESS
        }))
        const { userLogin: { userInfo } } = getState();


        const config = {
            headers: {
                'Content-type': 'application/json',
                // 'Authorization': `JWT ${userInfo.token}`
            }
        }

        const { data } = await axios.post(
            '/api/expenses/post/',
            expenses,
            config
        )

        dispatch({
            type: ADD_EXPENSES_SUCCESS,
            payload: data
        })


    } catch (error) {
        dispatch({
            type: ADD_EXPENSES_FAIL,
            payload:
                error.response && error.response.data.message
                    ? error.response.data.message

                    : error.response,
        })
    }
}

The dilemma is that I have copied it from other actions where it worked . I have also tried posting date using data manually using ThunderClient extention.(it is like insomnia or postman ) which mean there is no problem on the backend side.

Answer 1

Your thunk arguments are backwards. It should be (dispatch, getState)

export const addExpenses = (expenses) => async (dispatch, getState) => {