Reduxjs，Reactjs：删除项目，提供撤消功能

Posted 2023-02-22

【中文标题】Reduxjs，Reactjs：删除项目，提供撤消功能

【英文标题】：Reduxjs, Reactjs: Delete item, give undo feature

【发布时间】：2016-06-11 23:45:02

【问题描述】：

我正在使用 Reactjs 和 Redux 开发一个应用程序。我有一个要求，我需要从列表中删除该项目。此处删除功能一切正常，但我需要为用户提供撤消删除的选项。 我目前的方法是

return dispatch => 
        dispatch(deletePosts(postID));

        return fetch(API.url(postID), 
            method: API.type,
            credentials: 'same-origin'
        ).then(function(response) 
           if(!response.ok) 
            //revert back
           
        );
    

这里我先从状态中删除帖子，然后调用 fetch 请求从服务器中删除。但是如果我给任何这样的功能来逆转，我不能只是从服务器中删除。我认为显示撤消选项大约 3 秒并执行操作是合理的。 您能否帮助我如何实现这一点，以及是否有任何其他 Web 应用程序实现了这一点。 谢谢

【参考方案1】：

保留对列表初始状态的引用，然后创建一个删除项目的副本，然后在必要时恢复到初始状态。

const postsBefore = getPosts();

deletePosts(postID);

return fetch(API.url(postID), 
  method: API.type,
  credentials: 'same-origin'
).then(function(response) 
  if(!response.ok) 
    revertPosts(postsBefore);
  
);

重要的是你的 reducer 不执行突变，否则你的 delete 函数会修改原始数据结构，这也会改变你的 postsBefore 引用。当您尝试恢复到 postsBefore 时，您将恢复到完全相同的数据。

【讨论】：

嗨，丹，感谢您的回复。我想我的问题不是很解释。问题是我想实现“撤消”功能。因此，如果我从服务器“数据库”中删除内容，我将没有任何东西可以恢复。所以我很难在异步环境中构建“撤消”功能。希望这能更好地解释

只要在调用服务器之前获得对数据的引用，就没有关系。即使从存储和数据库中删除了该值，您仍然可以引用原始值，您可以将其注入到两者中。

你是对的，但问题是，如果你从数据库中删除它的最终版本，服务器上没有恢复。所以我想控制客户端的一切并发送最终的 API 调用。

【参考方案2】：

你有两个选择。首先，在客户端实现这个逻辑：

当用户点击“删除”按钮时，您应该将帖子标记为您的状态 作为toBeDeleted，但不向服务器发送真正的删除请求。

使用 setTimeout 延迟调用 deletePostForReal 操作 3 秒。

您的列表组件应该显示“取消”按钮而不是发布如果 它被标记为toBeDeleted。

如果用户单击“取消”- 从帖子中删除 toBeDeleted 字段。

在您延迟的deletePostForReal 操作中检查帖子是否有toBeDeleted 字段。如果是，则向服务器发送真实请求并从商店中删除帖子。如果没有 - 不要做任何事情。

第二种选择是在服务器端进行。在这种情况下，您的服务器应该自己实现类似的逻辑，并为客户端提供不同的端点。例如post/ID/delete 和post/ID/undo_delete。

【讨论】：

嗨@trashgenerator，谢谢。这类似于我正在尝试做的事情。但我不确定如何调用取消选项。你能检查一下这个gist.github.com/Vivekbhusal/a62bc0dc88daf4c1008c

看来你没有发布你的减速器。你能做jsfiddle吗？