Я получаю ошибку: действия должны быть обычными объектами. Использовать пользовательское промежуточное ПО для асинхронных действий

Question

Я искал о своей проблеме в StackOverflow, но не смог самостоятельно ее исправить, поэтому я решил опубликовать ее здесь.

Моя проблема, когда я пытаюсь удалить Mainmenu в своем приложении, если естьЕсли подменю принадлежит этому меню, оно не позволяет нам удалить его, тогда backend также отправит сообщение об ошибке 400 msg. но когда я пытаюсь удалить меню, у которого нет дочернего элемента или какого-либо подменю, оно удалит его полностью, теперь проблема заключается в том, что мой тост-уведомление вызывает два раза, когда возникает ошибка. Она показывает ошибку msg и также сообщение об успехе msg.

Я добавил небольшой GIF-файл, который показывает мою ошибку.

Просмотреть сообщение на imgur.com

ниже мое редукционное действие

//delete Menu
export const deleteMenu = (id) =>async (dispatch) => {
    console.log('action id : ' + id + '');
    await axios
        .delete(`/api/users/deleteMenu/${id}`)
        .then(
            (res) =>

                dispatch({
                    type: 'MENU_DELETED',
                    value: id
                }),
                dispatch(getMenu()),
                toast.success('Menu Deleted Successfully!')


        )
        .catch((err) => {
//below has a returnerror handler which i created is use to show errors when error is there.
            dispatch(returnErrors(err.response.data, err.response.status, 'MENU_DELETE_FAILED'));
            console.log(err);

        });
};

// get Действие меню

export const getMenu = () => (dispatch) => {


    axios
        .get(`/api/users/getMenu`)
        .then((res) =>

            dispatch({
                type: 'GET_MENU',
                value: res.data
            })
        )
        .catch((err) => {

            console.log('Get Menu error! : ' + err);
        });
};

ниже - мой бэкэнд

//delete Menu
router.delete('/deleteMenu/:id', (req, res) => {

    db.query('SELECT id FROM menu WHERE parentId =' + req.params.id + ' ', (error, hvchild) => {
        if (!error) {
            if (hvchild.length > 0) {
                return res.status(400).json("Please Delete Child Menu's Before Deleting Main Menu!");
            } else {
        console.log("im called")
                db.query('DELETE FROM menu WHERE id = ' + req.params.id + '', (err, row) => {
                    if (!err) {
                        res.json('Menu Deleted Successfully!');
                    } else {
                        console.log(err);
                    }
                });
            }
        }else{
      console.log(error);
    }
    });
});

Обновление: я обновил свой код в соответствии с ответом Нарендры Чухан. Теперь проблема в том, что мой тост-уведомление вызывает два раза, когда есть error.it показывает ошибку msg, а также сообщение об ошибке.

ps: im новинка, чтобы реагировать & redux:)

Answer 1

Я решил это сам, спасибо тебе, вся твоя помощь!

что было сделано

//delete Menu
export const deleteMenu = (id) => async (dispatch) => {
    console.log('action id : ' + id + '');
    await axios
        .delete(`/api/users/deleteMenu/${id}`)
        .then(
            (res) =>
///below i added 2 braces covering dispatch & toast & then removed the comma's which i ///used earlier .
            {dispatch({
                type: 'MENU_DELETED',
                value:{ id }
            })
            dispatch(getMenu())
            toast.success('Menu Deleted Successfully!')
                }




        )
        .catch((err) => {
            dispatch(returnErrors(err.response.data, err.response.status, 'MENU_DELETE_FAILED'));
            console.log(err);

        });
};

Answer 2

//delete Menu
export const deleteMenu = (id) => async (dispatch) => {
  console.log('action id : ' + id + '');
  await axios
    .delete(`/api/users/deleteMenu/${id}`)
    .then(
      (res) =>

        dispatch({
          type: 'MENU_DELETED',
          value: { id }
        }),
      dispatch(getMenu())
        toast.success('Menu Deleted Successfully!'),


    )
    .catch((err) => {
      //below has a returnerror handler which i created is use to show errors when error is there.
      dispatch(returnErrors(err.response.data, err.response.status, 'MENU_DELETE_FAILED'));
      console.log(err);

    });
};

попробуйте, это будет работать для вас