操作未在 react-redux 中调度

Question

我有一个表格收集关于今天的支出和总用户（作为出席）的数据，然后通过操作addExpenses()使用 redux 发送提交。 但它不会运行。 似乎它不存在或不存在。

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;

到目前为止我尝试过的

什么不是？ 我什至在动作内部尝试了console.log() ，但它在所需脚本之上工作（我的意思是动作在哪里提交数据）。 如果想问这里是行动

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,
        })
    }
}

困境是我从其他有效的操作中复制了它。 我还尝试使用 ThunderClient 扩展手动使用数据发布日期。（就像失眠或 postman ）这意味着后端没有问题。

Answer 1

您的 thunk arguments 是倒退的。 它应该是(dispatch, getState)

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