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

减少者不执行突变非常重要，否则您的删除功能会修改原始数据结构，这也会改变您的postsBefore引用。当您尝试恢复为postsBefore时，您将恢复为完全相同的数据。

Answer 2

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

当用户点击“删除”按钮时，您应该在您的州内标记帖子如toBeDeleted但不向服务器发送真正的删除请求。
使用deletePostForReal延迟拨打setTimeout行动3秒钟。
您的列表组件应显示“取消”按钮而不是发布if 它标记为toBeDeleted。
如果用户点击“取消”，请从帖子中删除toBeDeleted字段。
在延迟deletePostForReal操作中，检查帖子是否有toBeDeleted字段。如果是，请向服务器发送实际请求并从商店中删除帖子。如果不 - 不做任何事情。

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

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

2 个答案: