在React Redux中实现撤消状态更改（撤消存储/历史实现）的最佳方法是什么

Question

我找了一个历史重做/存储复位到以前的状态的一个终极版的反应中的应用。

我发现一个博客告诉我们可以通过将当前状态，将来状态和过去状态存储在堆栈中并相应地进行重置来完成此操作。

我也发现了类似的问题在StackOverflow的，但它并没有给我一个正确的答案，或者也许这是我很难理解。

我已经构建了一个演示ToDo应用，并使用redux-logger记录了具有先前状态和更新状态的商店详细信息。您可以在此处找到代码。

在redux中是否有商店重置方法，以便我们可以获取先前的状态并更新商店，而除了拥有具有当前，过去和将来状态的商店之外？

Answer 1

对于任何在 2020 年寻求解决方案的人来说。您不必将整个状态对象存储为现在、过去和未来。

相反，您可以只存储有关已更改内容的详细信息。这可以使用ImmerJS来实现。它记录对状态对象所做的所有更改并生成称为补丁的东西。

示例：如果age从更新32为40，则生成的补丁将是：

修补： [ { op: 'replace', path: [ 'age' ], value: 40 } ]

反向补丁： [ { op: 'replace', path: [ 'age' ], value: 32 } ]

它还公开了一种将这些补丁/逆补丁应用于状态的方法 - applyPatch。因此，要撤消，我们可以应用反向补丁，要重做，我们可以应用补丁。

您可以在此处找到完整实现的详细信息：使用 Immer 在 Redux 中实现撤消重做功能

Answer 2

什么是最好的方法 ...

最好的方法总是很难定义，它实际上取决于您的用例以及客户端和服务器的要求。

但是首先，您可以考虑使用一个库或查看它们如何解决此问题，例如：

或者，您可以实现自己的应用程序，作为Redux，您可以存储所有应用程序状态。简单的堆栈可能是在任何给定时间存储应用程序状态的简单有效的方法。

let yourHistory = [state1, state2, state3];