在本文中，我们将介绍如何使用 npm 包 redux-existing-undo。这是一个非常有用的包，可以帮助我们管理 redux store 中已有的撤销与重做历史记录。
什么是 redux-existing-undo？
redux-existing-undo 是一个能够为 redux 应用程序提供撤销和重做历史记录的中间件。它的主要功能是允许我们撤销之前的 redux store 中的 state 改变操作，并且可以支持重做。该包是基于 redux-undo 开发的，并且扩展了更多的功能来支持 redux store 中已有的操作历史。
安装
我们可以使用 npm 来安装 redux-existing-undo 包。在终端中输入以下命令:
npm install redux-existing-undo
现在，我们已经成功地将 redux-existing-undo 安装到了我们的项目中。
初步配置
在我们的应用程序中，我们需要添加 redux-existing-undo middleware 才能使用它。例如：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ -------- ---- ---------------------- ------ ----------- ---- ------------------- ----- -------------- - ----------- ----- ----- - ------------ ---------------------------- ----------------- --
在以上代码片段中，我们引入了 createStore 方法和 applyMiddleware 方法，并调用了 undoable 函数来创建一个 redux middleware。最后，我们使用 applyMiddleware 方法将此 middleware 给我们的 store 对象。
撤销和重做
我们可以在应用程序中定义一些 action 来告诉 redux-existing-undo 哪些操作可以被添加到历史记录中。例如：
export const addItem = (item) => {
return { type: 'ADD_ITEM', payload: item };
};
export const removeItem = (item) => {
return { type: 'REMOVE_ITEM', payload: item };
};在上述代码中，我们定义了两个用于添加和删除 item 的 action。我们需要将这两个 action 放入 undoable 中，以便 redux-existing-undo 可以了解哪些操作需要被记录下来。此时，我们需要对之前的 store 进行更改：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ -------- ---- ---------------------- ------ ----------- ---- ------------------- ----- -------------- - ---------- --------- ------- --------- ------- ------- -------- --------------------- ------------- ---------------- - --- -- ------ --- --- ----- ----- - ------------ ---------------------------- ----------------- --
- undoType, redoType: 定义了撤销和重做的 action 类型，默认值为 'UNDO' 和 'REDO'。
- filter: 可以根据 state 和历史记录中的 action 来过滤不需要记录的操作。
- limit: 定义历史记录可以存储的最大数量，默认值为 100。我们可以通过修改 limit 来控制历史记录的大小。
现在，我们已经成功地将 redux-existing-undo 集成到我们的应用程序中。此时，我们的 addItem 和 removeItem action 将可以被记录到我们的历史记录中，以支持撤销和重做操作。例如：
store.dispatch(addItem({ name: 'item 1', price: 100 }));
store.dispatch(addItem({ name: 'item 2', price: 200 }));
store.dispatch(addItem({ name: 'item 3', price: 300 }));
store.dispatch(removeItem({ name: 'item 2', price: 200 }));
store.dispatch(addItem({ name: 'item 4', price: 400 }));
store.dispatch(undoAction());在以上代码中，我们分别执行了四个 action：添加一条商品信息，再添加一条商品信息，再添加一条商品信息，然后删除一条商品信息。最后，我们又添加了一条商品信息。然后，我们使用 undoAction() 方法撤销之前的操作，最后印证一下操作是否会成功的添加到历史记录中。
总结
在本文中，我们已经介绍了如何使用 npm 包 redux-existing-undo 来为 redux 应用程序提供撤销和重做历史记录的中间件。我们覆盖了初步配置的不同方面，以及如何撤销和重做之前的 state 操作。现在您已经可以自行尝试使用 redux-existing-undo 和你的项目进行集成，并享受操作历史记录带来的便利和效率。示例代码如下：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005570a81e8991b448d3f3c