前言
随着前端项目复杂度的提高，数据操作变得越来越复杂。为了应对这种情况，前端社区提供了许多解决方案，而 Redux 就是其中之一。
如果你使用 Redux，那么你可能会遇到撤销或重做操作的问题。Redux-undo 就是为了解决这个问题而出现的一个 npm 包。在本文中，我们将介绍 redux-undo 的使用教程。
安装
首先，在你的项目中安装 redux 和 redux-undo：
npm install redux redux-undo
创建 Redux Store
首先，你需要创建一个 Redux store。在创建过程中，你需要将 redux-undo 中提供的 undoable 函数作为 Redux reducer 的参数，以创建一个支持 Undo/Redo 操作的 store。
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ --------- - ------------- - ---- -------------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ ---------- - ----- ------------ ---------- ----- ---
---- --------------
------ ---------------- ------ -- -
-- ------ --- ------------- -
------ - -------- ---------- --------------- --
-
------ -----
---
--------
------ ------
-
--
----- -------------- - -- -- -
----- ----- - ------------
----------------- - ------- -------------------------------------- --
--
------ ------
--
------ ------- ---------------上面的例子展示了如何创建 Redux store，并将 redux-undo 中提供的 undoable 函数作为 Redux reducer 的参数。使用 undoable 函数可以创建一个支持 Undo/Redo 操作的 store。
注意，在 undoable 函数的第二个参数中，我们指定了一个 Redux action 对象。这个对象的作用是将 action 筛选掉并不参与 Undo/Redo 操作。
使用
接下来，我们需要在组件中使用我们创建的 store。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - --------- ------- - ---- --------------
------ -------------- ---- ----------
----- ----- - -----------------
----- ------- - -- -------- -- -- -
--- ------
------ -
-----
------ ----------- -- - ----- - ----- -- --
-------
----------- -- -
---------- ----- ----------- ----- ----------- ---
----------- - ---
--
-
--- ----
---------
------
--
--
----- ---- - -- ----- ---------- ------- -- -- -
---
-----------------
-------- --------------- --------- - -------------- - ------ --
-
------
-----
--
----- -------- - -- ------ ------------ ----- ---- -- -- -
-----
------- -------------- -------------------------------------------
------- -------------- ---------------------------------------------
----
------------------------- ------ -- -
-----
-----------
---------
----------- -- -------------------
--
---
-----
------
--
----- --------------- - ------- -- -
------ -
------ -----------
--
--
----- ------------------ - ---------- -- -
------ -
------------ ------- -- -
---------- ----- -------------- ----- ---
--
----- -- -- -
---------- ----- ------ ---
--
----- -- -- -
---------- ----- ------ ---
-
--
--
----- --------------- - --------
----------------
------------------
------------
----------------
--------- --------------
-----
-------- --
---------------- --
------
------------
-------------------------------
--在上面的例子中，我们创建了一个可撤销的 TodoList 组件。在这个组件中，我们展示了一个撤销和重做按钮，这些按钮将触发 store 的 UNDO 和 REDO action。此外，我们还使用了 React Redux 的 connect 方法将组件连接到 Redux store 中。
深入了解
通过上述例子我们可以看到，使用 redux-undo 只需用非常少量的代码就可以支持 Undo 和 Redo 操作了。但是，在实际应用中，很可能会遇到一些更复杂的情况。下面，我们将深入了解 redux-undo，并附上一些常见的使用示例。
搜索
在实际应用中，你可能会遇到这样一种情况：你在搜索栏中输入了一些关键字，然后你想 Undo 刚才的搜索操作，这时你可能需要撤销的是多个 action。在这种情况下，你可以使用 groupBy 函数。
-- -------------------- ---- -------
------ --------- - ------------------ - ---- -------------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ ---------- - ----- ------------ ---------- ----- ---
---- --------------
------ ------------------- ------ -- ----- --- --------------
---- ------------------------
------ - --------- ----------------- ------------- --
--------
------ ------
-
--
----- -------------- - -- -- -
----- ----- - ------------
----------------- - -------- ------------------------------- --------------- --
--
------ ------
--在上面的代码中，我们将 groupBy 函数作为 undoable 的第二个参数，并在其中指定了需要进行 group 的 action types。
这里的 groupBy 函数会将相同的 action types 组成一个数组，你可以通过撤销来一次性撤销所有的搜索操作。
复杂操作
在一些情况下，你可能需要执行一些复杂的操作，例如，你需要将一个 Todo 移动到列表的末尾，或者将一个 Todo 从列表中移到另一个列表中。这时，你需要定义一个新的 action，并使用 excludeAction 函数将其筛选掉，防止其干扰 Undo/Redo 操作。
-- -------------------- ---- -------
------ --------- - ------------- - ---- -------------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ ---------- - ----- ------------ ---------- ----- ---
---- ------------
------ -----
----------- ------ -- ----- --- ----------------- -- ------ --- ---- -- -----------
--------- --------------- -- ---- ---------- ------ ---------
---------------------- -- --- --- ----- ---- -- ---------
------------- -- --- ---------- ----- ---------
----------------------
----------- ------ -- ----- --- -----------------
--
--------
------ ------
-
--
----- -------------- - -- -- -
----- ----- - ------------
----------------- - ------- -------------------------- --
--
------ ------
--在上面的代码中，我们定义了一个新的 action MOVE_TODO，并通过 excludeAction 函数将其筛选掉，防止其干扰 Undo/Redo 操作。
自定义 Undo/Redo 操作
或许在某些情况下，你需要针对某些 action 实现自定义的 Undo/Redo 操作。例如，你需要在撤销操作时并非还原 action 的初始状态，而是还原到一个过去记录的状态。在这种情况下，你可以通过自定义 reducer 实现自定义 Undo/Redo 操作。
-- -------------------- ---- -------
------ --------- - -------------- -- ------------------ - ---- -------------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ ---------- - ----- ------------ ---------- ----- ---
---- --------------
------ ---------------- ------ -- -
-- ------ --- ------------- -
------ ----------------
-
------ -----
---
--------
------ ------
-
--
----- -------------- - -- -- -
----- ----- - ------------
-----------------
--
----------------
----- -----------
----- ------ ------
---
----------------
----- -----------
----- ------ ------
---
----------------
----- -----------
----- ---- ---- ------
---
-- -- ---- ------ -- ---- ----- ------
----- -------- - --------------------------------------
-- -------- - --- ----- ------
----------------
----- --------------
------ --
--------- --------
---
------------------------------------------
------------------------------------------
------ ------
--在上面的代码中，我们先定义了一个 action REVERT_TODO，并在其中使用了自定义 reducer 实现了自定义的 Undo/Redo 操作。对于这个 action，我们在 dispatch 时指定了一个 revertTo 参数，它表示我们要将某个 Todo 恢复到的状态。当我们在撤销操作时，redux-undo 将会还原到我们指定的状态，而不是还原到 action 的初始状态。
结论
在本文中，我们介绍了 redux-undo 的使用教程，并附带了一些常见的使用示例。虽然 redux-undo 只是一个很小的 npm 包，但它可以为我们的项目增加非常重要的功能。我希望本文能够对你在实际开发中遇到的问题有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb525b5cbfe1ea06113e3