React 的状态管理工具 Redux 可以说是前端领域中最为流行的库之一，它在前端开发中扮演着极为重要的角色。Redux 的核心概念包括：store，action，reducer。在 Redux 中实现 Undo/Redo 可以帮助开发者更好地管理应用状态，提升用户体验。本文介绍 Redux 如何实现多级 Undo/Redo，包括详细的实现过程和示例代码。
理解 Undo/Redo
Undo/Redo 是一个非常基础的操作，我们可以在很多场景中都用到。例如，在写文章的时候，如果写了一段话后后悔了，可以通过撤销操作（Undo）将它撤回。如果撤销操作之后觉得还是需要这一段话，可以通过重做操作（Redo）将它重新添加到文档中。
在 Redux 中，实现 Undo/Redo 主要通过数据结构和操作。在需要记录历史记录的操作时，我们可以将当前状态通过 action 的形式传给 store。Store 将接收到的 action 添加到一个数组中，形成操作记录。当需要撤销操作时，从该操作记录中取出上一步的状态，同时将当前状态加入到 redo 数组中。当需要重做操作时，从 redo 数组中取出下一步的状态。
实现多级 Undo/Redo
下面是实现多级 Undo/Redo 操作的核心代码：
-- -------------------- ---- -------
----- ----------- - --- -- -------
----- ------------ - -
----
-------- --- -- ----
-------- --- -- --------------
----- --- -- ----
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- --------------
-- ----------- ------
----- -------- - ---------- -------------------
----- --------- -------- ----- - ------
-- --------------- -- ------------ -
---------------- -- ----------------
-
-----------------------
-- -------- - -------------- - -- -
-------------- ------------- -- ---------- ---- --
-
------ ------------- -------- -------- -------------- - -- ------
---- -------
-- ----
----- --------- ------------ -------- ------------ ----- --------- - ------
----- --------------- - -------------------------
-- ------------ - -- -
----- -------- - ----------------------- - ---
----------------------------------
------ ------------- -------- ------------ -------- ----------- - -- ----- ----------
-
------ ------
---- -------
-- ----
----- --------- ------------ -------- ------------ ----- --------- - ------
-- ------------ - ------------------ - -- -
----- -------- - ----------------------- - ---
-----------------
------ ------------- -------- ------------ -------- ----------- - -- ----- ----------
-
------ ------
--------
------ ------
-
-其中，records 数组是存放历史记录的数组，current 是当前状态所在记录数组中的位置，redo 数组是重做操作时的记录。MAX_RECORDS 常量是最大的记录步数，当记录步数超过该值时，需要弹出最早的记录。
在处理需要记录历史记录的 action 时，我们将当前状态加入到 records 数组中，并更新 current 的值。同时，如果 redo 数组中还存在未完成的操作记录，需要清除掉。
在撤销操作中，我们从 records 数组中取出上一步的状态，并将当前状态加入到 redo 数组中。在重做操作中，我们从 redo 数组中取出下一步的状态，并将当前状态加入到 records 数组中。
示例代码
下面是一个简单的 Redux 应用，使用上述代码实现了多级 Undo/Redo。
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- -------- ---- --------------
------ ------------- ---- --------
----- ----------- - ---
----- ------------ - -
------ --
-------- ---
-------- ---
----- ---
-
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
----- -------- - ---------- ------ ----------- - ---
----- --------- -------- ----- - ------
-- --------------- -- ------------ -
----------------
-
-----------------------
-- -------- - -------------- - -- -
-------------- -------------
-
------ ------------- -------- -------- -------------- - -- ------
---- ------------
----- --------- - ---------- ------ ----------- - ---
----- --------- --------- -------- --------- ----- ------ - ------
-- ---------------- -- ------------ -
-----------------
-
-------------------------
-- --------- - --------------- - -- -
--------------- --------------
-
------ -------------- -------- --------- -------- --------------- - -- ----- -------
---- -------
----- --------- ------------ -------- ------------ ----- --------- - ------
----- --------------- - -------------------------
-- ------------ - -- -
----- -------- - ----------------------- - ---
----------------------------------
------ ------------- -------- ------------ -------- ----------- - -- ----- ----------
-
------ ------
---- -------
----- --------- ------------ -------- ------------ ----- --------- - ------
-- ------------ - ------------------ - -- -
----- -------- - ----------------------- - ---
-----------------
------ ------------- -------- ------------ -------- ----------- - -- ----- ----------
-
------ ------
--------
------ ------
-
-
----- ----- - ---------------------
-------- -------------- -
----- ------- ----- ----- - ------
------ -
-----
----------------
------- ----------- -- -----------------------------
------- ----------- -- -----------------------------
------- ----------- -- ---------------------
------- ----------- -- ---------------------
------
--
-
----- --------------- - ----- -- --
------ ------------
---
----- ------------------ - -
---------- -- -- ------- --------------
---------- -- -- ------- --------------
----- -- -- ------- ---------
----- -- -- ------- ---------
--
----- ---------------- - ------------------------ -----------------------------
------ ------- -------- ----- -
------ -
--------- --------------
----------------- --
-----------
--
-总结
通过本文的介绍，我们了解到 Redux 中 Undo/Redo 的实现方法。在 Redux 中实现多级 Undo/Redo，可以为我们的应用带来更好的用户体验。本文提供了详细的实现过程和示例代码，希望可以帮助开发者更好地运用 Redux。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d01ba6b5eee0b52571e59f