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

Question

我正在使用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 应用程序已实现这一点。谢谢

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

重要的是，您的

化简器不执行突变，否则您的 delete 函数将修改原始数据结构，这也将更改您的postsBefore引用。当您尝试恢复到postsBefore 时，您将恢复到完全相同的数据。

Answer 2

您有两个选择。首先，要在客户端实现此逻辑：

1. 当用户单击"删除"按钮时，您应该在您的状态中标记帖子作为toBeDeleted，但不向服务器发送真正的删除请求。

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

3. 您的列表组件应显示"取消"按钮，而不是发布，如果它被标记为 toBeDeleted .

4. 如果用户用户单击"取消" – 从帖子中删除toBeDeleted字段。

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

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