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  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 >
                                <label >Total Attendances</label>
                                <li >{count}</li>

                                <label >Expense Per Attendance</label>
                                <li >{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.

CodePudding user response：

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

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