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

标签 javascript reactjs redux react-redux

我正在寻找 redux react 应用程序中的历史记录重做/存储重置为之前的状态

我找到了 blog告诉它可以通过将现在、 future 和过去的状态存储在堆栈中并相应地重置来完成。

我也找到了一个类似的 questionStackOverflow 中,但它没有给我一个正确的答案,或者我可能很难理解。

我已经构建了一个演示 ToDo app并使用 redux-logger 记录存储详细信息以及之前的状态和更新后的状态。您可以找到 code在这里。

我们在 redux 中是否有一个 store reset 方法,以便我们可以获取以前的状态并更新具有当前、过去和 future 状态的 store 的 store?

最佳答案

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

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

示例:如果 age32 更新为 40,则生成的补丁将是:

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

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

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

您可以在此处找到完整实现的详细信息:Implementing Undo-Redo Functionality in Redux using Immer

关于javascript - 在 React Redux 中实现撤消状态更改(撤消存储/历史实现)的最佳方法是什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43060953/

相关文章:

javascript - JS 文件未加载

javascript - 从 javascript/jquery 与 ReactJS 组件交互

javascript - 我们如何为动态打印的 anchor 标签编写访问函数

javascript - 更新 Redux reducer 中的嵌套对象

Javascript数组,修改所有键的值

javascript - 在 React JS 中创建表单后立即提交

javascript - React D3 Linechart组件实现错误

javascript - 条件渲染不显示 - ReactJS

node.js - Expressjs cookie 解析器在 cookie 中添加 j : 前缀

react-router - 如何处理 Redux 中的注销路由?