react + redux 中的多次/批量删除 [英] Multiple/bulk delete in react + redux

问题描述

我有一个允许多选和删除功能的数据网格.我的 api 有一个删除端点；

I have a data grid that allows multiple selection and deletion feature. I have a delete endpoint from my api;

删除 http://localhost:8888/api/audit/id

这是动作创建者；

export function deleteAudit(audits, callback) {
    let count = 0;
    console.log("selected audits", audits);

    const deleteItem = (auditId) => {
        console.log("deleting..", auditId);

        const endpoint = `http://localhost:8888/api/audit/${auditId}`;
        const req = Axios.delete(endpoint, callback);
        return (dispatch) => {
            req.then(res => {
                if (res.status == HttpStatus.OK) {
                    console.log("deleted", auditId);
                    count += 1;
                    if (audits[count] != null) {
                        deleteItem(audits[count]);
                    }
                    else {
                        console.log("all deleted heading to callback");
                        callback();
                    }
                }
            });
            dispatch({type:DELETE_AUDIT, payload: audits});
        }
    }
    deleteItem(audits[count]);
}

由于我的端点一次只允许删除一个项目，所以我使用递归函数连续调用.但是，当使用 async(thunk) 方法忽略时，这不能正常工作，它没有用新状态刷新列表.添加 thunk 调度方法后，它只会删除第一个选择，所以我完全迷失了.实现这一目标的正确方法是什么?

As my endpoint just allows one item deletion at a time, I used a recursive function to make calls successively. However, this ain't work properly when ignore using async(thunk) approach, it was not refreshing list with new state. After adding the thunk dispatch method it only deletes the first selection, so I get completely lost. What is the right way to achieve this?

推荐答案

问题是，我没有导入 redux-thunk 包，导入后，正如@Tho Vu 指出的那样axios，我把我的代码改成如下；

The problem was, I didn't import the redux-thunk package, after importing it, as @Tho Vu pointing out on axios, I have changed my code as follows;

export const deleteAudit = (audits, callback) => {

    const request = axios.all(_.map(audits, (audit) => 
    {   
        deleteItem(audit);
    }));
    return (dispatch) => {
        request.then(axios.spread((a, f) => {
            dispatch({type:DELETE_AUDIT, payload:audits});
        })).then(() => {
            callback();
        });
    }
}
function deleteItem(id) {
    const endpoint = `http://localhost:8888/api/audit/${id}`;
    return axios.delete(endpoint);
}

这篇关于react + redux 中的多次/批量删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！