1. 简介
redux-undo-middleware 是一个基于 Redux 构建的中间件库，可用于实现在应用程序中进行撤销和重做操作的功能。
该库提供了一个简单的方式来保存应用程序状态的历史记录，并在需要时还原状态。因此，您可以使用 redux-undo-middleware 轻松实现撤销和重做操作，以及跟踪应用程序状态的变化。
2. 安装
要使用 redux-undo-middleware，您需要首先安装 redux 和 redux-undo-middleware 库：
npm install --save redux redux-undo-middleware
3. 配置
3.1 导入
导入 redux-undo-middleware 并将其包含在您的 Redux 存储器的中间件列表中。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ -------------- ---- ------------------------ ------ ----------- ---- ------------- -- -- ----- - ----- ----- - ------------ ------------ -------------------------------- --
3.2 配置
使用 redux-undo-middleware，您需要配置 reducer 来支持撤销和重做操作。
-- -------------------- ---- ------- ------ -------- ---- ------------- ------ - --------------- - ---- -------- -- -------- ------ ----- ---- ---------- ------ ---------------- ---- --------------------- -- - ------- --- -------- - ----- ------------- - ---------------- -- ----- ------- ---- ----- ----------- - ----------------- ------ -------------- ----------------- ---
在上面的示例中，我们将 todos reducer 包裹在 undoable 中，从而使其适用于 redux-undo-middleware。然后，我们将所有 reducer 结合起来以创建 rootReducer。
通过包装 reducer，我们可以告诉 redux-undo-middleware，要在存储器中添加历史记录并在需要时还原状态。
4. 实现撤销和重做操作
现在，我们已经成功在您的 Redux 应用程序中安装并配置了 redux-undo-middleware，让我们来看看如何实现撤销和重做操作。
在我们的示例中，我们将显示一个列表，该列表显示添加的任务，并提供一个撤销按钮，以便用户可以撤销上一次添加的任务。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------- - ---- --------------
------ - ------- - ---- -------------
----- -------- - -- ------ -------- -------- -- -- -
----- ------- --------- - -------------
----- ------------ - --- -- -
-------------------
---------------
-------------
--
----- ---------- - -- -- -
-----------
--
------ -
--
----- ------------------------
------
-----------
-------------
---------------- -----
------------- -- -------------------------
--
------- --------------------------
-------
----
----------------- -- -
--- ------------------------------
---
-----
------- ----------------------------------
---
--
--
----- --------------- - ------- -- --
------ --------------------
---
----- ------------------ - ---------- -- --
-------- ------ -- ------------------------
--------- -- -- ---------- ----- ------ ---
---
------ ------- ------------------------ ------------------------------在上面的代码中，我们使用 react-redux 提供的 connect 函数将 TodoList 组件连接到 Redux 数据库。我们将 addTodo 和 undoTodo 函数映射到 mapDispatchToProps 对象中，并将 todos 映射到 mapStateToProps 函数中。
当用户在输入框中输入文本并点击“添加”按钮时，我们调用 addTodo 函数并将输入值作为参数传递。此时，redux-undo-middleware 会自动将状态添加到历史记录中。
当用户点击“撤销”按钮时，我们调用 undoTodo 函数以还原上一个状态。
5. 总结
在本文中，我们介绍了如何使用 redux-undo-middleware 库来实现撤销和重做功能。我们展示了如何安装、配置和使用库，并提供了一个示例应用程序，用于展示基本的列表撤销和重做操作。
在实践中，redux-undo-middleware 可以用于跟踪任何类型的状态更改，包括表单更改、图形编辑和大型应用程序的状态保存。通过理解 redux-undo-middleware 的工作原理，您可以更好地组织和管理您的应用程序，并为用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700fe361a36e0bce8d69