前言
Redux 是一个流行的 JavaScript 状态管理库，它提供了一种可预测且可维护的方式来处理应用程序的状态变化。在开发应用程序时，很常见的需求是需要实现 Undo 和 Redo 功能，即用户可以撤销和重做之前的操作。这篇文章将介绍如何在 Redux 中实现 Undo 和 Redo 的功能，并提供示例代码。
实现 Undo 和 Redo
Redux 本身不提供 Undo 和 Redo 功能，但是它提供了一些 API 和概念来构建一个支持撤销和重做的应用程序。实现 Undo 和 Redo 的关键是存储历史状态，并能够在需要时回滚到以前的状态。下面是实现 Undo 和 Redo 的步骤：
步骤一：记录历史状态
为了记录历史状态，我们需要将状态持久化到某个地方。Redux 提供了一个叫做 middlewares 的概念，可以在数据流从 action 到 reducer 的过程中进行一些额外的操作。我们可以编写一个 middleware 来捕获每个 action 在 reducer 处理之前的状态，并将其存储到某个地方。例如，我们可以使用一个数组来存储历史状态：
-- -------------
----- ------------ - -
----- ---
-------- -----
------- --
-
-------- ----------------- -
------ -------------- - ------------- ------- -
----- - ----- -------- ------ - - ------
------ ------------- -
---- -------
----- -------- - ---------------- - --
----- ------- - ------------- ----------- - --
------ -
----- --------
-------- ---------
------- --------- ----------
-
---- -------
----- ---- - ---------
----- --------- - ---------------
------ -
----- --------- ---------
-------- -----
------- ---------
-
--------
----- ---------- - ---------------- -------
-- ----------- --- -------- -
------ -----
-
------ -
----- --------- ---------
-------- -----------
------- --
-
-
-
-上面的代码中，我们定义了一个名为 undoable 的函数，它接受一个 reducer 作为参数，并返回一个新的 reducer。新的 reducer 中，我们维护了一个状态对象，其中 past 保存过去的状态，present 保存当前的状态，future 保存未来的状态。在每个 action 被 dispatched 之前，我们捕获当前状态，并将其添加到 past 数组中。如果用户执行了撤销操作，我们将 past 数组中最后一个状态设置为当前状态，将该状态从 past 数组中移除，并将当前状态添加到 future 数组中。如果用户执行了重做操作，我们将 future 数组中第一个状态设置为当前状态，将该状态从 future 数组中移除，并将当前状态添加到 past 数组中。如果用户执行了其他操作，我们将当前状态添加到 past 数组中，并返回一个新的状态对象，其中 present 被设置为新的状态，past 数组被更新为新的 past，future 数组被清空。
步骤二：封装 action
为了执行撤销和重做操作，我们需要 dispatch 一个特定的 action，例如 'UNDO' 或 'REDO'。我们可以封装这些 action，以方便使用：
-- ---------- ------ ----- ---- - -- -- -- ----- ------ -- ------ ----- ---- - -- -- -- ----- ------ --
步骤三：使用新的 reducer 和封装后的 action
上面的代码演示了如何实现一个可撤销和重做的 reducer 和 action。现在我们需要将它们应用到我们的应用程序中。在创建 store 的时候，我们需要将我们编写的 undoable reducer 作为参数传递给 createStore 函数，并使用 applyMiddleware 函数将 middleware 注册到 store 中。该 middleware 将捕获每个 action，并在 reducer 处理之前将状态记录到历史状态数组中。
-- -------- ------ - ------------ --------------- - ---- ------- ------ -------- ---- -------------- ------ ------- ---- ----------- ----- ----- - ------------ ------------------ ------------------ ------------- --- -
现在我们可以在应用程序中使用我们定义的封装后的 action，以执行撤销和重做操作：
-- ------
------ ----- ---- -------
------ - ------- - ---- -------------
------ - ----- ---- - ---- -----------
----- --- - -- -------- ----- ------- ----- ---- -- -- -
------ -
-----
------- --------------------- --- -- ----------------------------
------- ----------------------- --- -- ----------------------------
----------------
------
-
-
----- --------------- - ----- -- -- -------- --
------ ------- --------
----------------
- ----- ---- -
------上面的代码中，我们在组件中使用 connect 函数创建一个连接到 Redux store 的组件。我们定义了一个 App 组件，它接受来自 store 的 past、future 和 present 状态，以及封装后的 undo 和 redo action。在组件中，我们渲染两个按钮，分别用于执行 Undo 和 Redo 操作。通过检查 past 和 future 数组的长度，我们决定是否禁用按钮。最后，我们渲染一个 p 元素，用于展示当前的状态。
总结
在本文中，我们介绍了如何使用 Redux 实现撤销和重做功能。我们实现了一个名为 undoable 的 middleware，它在 reducer 处理之前捕获状态，并存储它们到历史状态数组中。我们还封装了 undo 和 redo action，以方便在应用程序中执行撤销和重做操作。最后，我们展示了如何在一个简单的应用程序中，使用我们的 middleware 和 action 来实现撤销和重做功能。希望本文能够帮助你更好地理解 Redux，并为你的应用程序提供撤销和重做功能的支持。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65017a5b95b1f8cacdf31509