随着前端应用越来越复杂，数据状态的管理变得越来越困难，Redux 就成为一个比较好的解决方案。在 Redux 中，可以轻松管理应用的状态，并且通过 reducer 函数来修改状态。但是，对于一些大型的应用来说，提供撤销与重做功能显得尤为重要，本文就介绍 Redux 如何实现撤销与重做功能。
背景知识
在介绍如何实现撤销与重做功能之前，需要了解一些 Redux 的基础知识，包括：
Action：描述发生了什么事情，需要包含一个
type属性表示 Action 的类型，以及可能需要的其他属性。Reducer：根据 Action 来更新 Store 中的数据，是一个纯函数。
Store：应用的状态存储器，包含了所有的数据状态。
实现
实现 Redux 中的撤销与重做功能，需要先了解如何记录每个状态的修改。可以通过记录每个 Action 的数据来实现，这可以通过监听 Store 的 dispatch 函数来实现。在每次修改状态的时候，都将修改的 Action 存储到一个数组中，这个数组就是用于记录状态修改的历史记录。
为了实现撤销和重做功能，需要有一个指针来记录当前状态在历史记录数组中的位置。当执行撤销操作时，使用指针返回到上一个状态，当执行重做操作时，使用指针前进到下一个状态。
下面是一个示例代码：
----- ---- - -------
----- ---- - -------
-------- ----------------- -
----- ------------ - -
----- ---
-------- ------------------ ----
------- --
-
------ -------------- - ------------- ------- -
----- - ----- -------- ------ - - ------
------------------- -
---- -----
----- -------- - ---------------- - ---
----- ------- - ------------- ----------- - ---
------ -
----- --------
-------- ---------
------- --------- ----------
-
---- -----
----- ---- - ----------
----- --------- - ----------------
------ -
----- --------- ---------
-------- -----
------- ---------
-
--------
----- ---------- - ---------------- --------
-- -------- --- ----------- -
------ ------
-
------ -
----- --------- ---------
-------- -----------
------- --
-
-
-
-
这个高阶函数 undoable 接收一个 reducer 函数作为参数，并返回一个新的 Reducer。在新的 Reducer 中，记录了过去、现在以及未来的状态，这些状态都在 initialState 中定义了。
可以看到，在新的 Reducer 中，每次修改状态时，都会将当前状态加入历史记录，并且清空未来状态。而在撤销和重做操作中，分别将过去或未来状态弹出，并且修改相应的记录。
指导意义
通过了解和实现 Redux 中的撤销与重做功能，可以更好地理解 Redux 的核心概念，并掌握如何实现复杂应用的状态管理。此外，在实际开发中，有些项目需要考虑到数据的撤销和重做的功能，学会应用这种技术可以快速提高开发效率和准确度。
结论
在 Redux 中实现撤销与重做功能，需要记录状态的历史记录，并通过处理 Action 来实现。用高阶函数来封装 Reducer 可以轻松实现，这种技术在开发大型应用时将会非常有用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670e40ac5f5512810260455c