im getting Error: Actions must be plain objects. Use custom middleware for async actions

Question

我在 Whosebug 中搜索了我的问题，但无法自行修复，所以我想 post 在这里。

我的问题是当我尝试删除我的应用程序中的 Mainmenu 时，如果有一个子菜单属于该菜单，它不允许我们删除它，那么后端也会发送 nice error 400 msg。但是当我尝试删除没有任何子菜单或任何子菜单的菜单时，它会完美地删除它现在的问题是当 error.it 显示错误消息和成功消息时，我的通知 toast 调用了两次。

我添加了显示我的错误的小 gif 文件。

View post on imgur.com

下面是我的 redux 操作

//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);

        });
};

//获取菜单操作

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

更新：我已经根据 Narendra Chouhan 的回答更新了我的代码。现在的问题是当 error.it 显示错误消息和成功消息时，我的通知 toast 调用了两次。

ps：我是 React 和 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) =>

        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);

    });
};

试试这个，它会为你工作

Answer 2

我自己解决了谢谢大家的帮助！

所做的是

//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);

        });
};

im getting Error: Actions must be plain objects. Use custom middleware for async actions

im getting Error: Actions must be plain objects. Use custom middleware for async actions

reactjs

redux-thunk

react-redux