介绍
在前端应用中，我们通常会使用 Redux 来管理应用的状态。而在 Redux 中，有一个非常重要的概念，那就是状态的不可变性。这意味着我们不能直接修改状态，而是需要通过 dispatch 一个 action 来修改状态。
但是这种方式有一个缺点，就是当我们需要撤销或者重做某些操作时，比如撤销上一次删除操作，或者重做上一次撤销操作，我们需要手动编写相应的代码来实现。而 @supcon/redux-undo-redo 包则为我们提供了这样一种功能，可以帮助我们轻松地实现撤销和重做功能。
安装
我们可以通过 npm 来安装 @supcon/redux-undo-redo 包。在项目的根目录下，执行以下命令即可：
npm install @supcon/redux-undo-redo --save
安装完成之后，我们需要在 Redux 的 store 中使用该包提供的相关中间件。
import { createStore, applyMiddleware } from 'redux';
import undoRedoMiddleware from '@supcon/redux-undo-redo';
const store = createStore(reducer, applyMiddleware(undoRedoMiddleware));使用
1. 配置
我们可以在 createStore 函数的第二个参数中传入 @supcon/redux-undo-redo 中间件来启用其功能。此时需要注意几个配置项：
- maxHistory 为撤销和重做的最大限制次数；
- debug 用于开启调试模式。
import undoRedoMiddleware from '@supcon/redux-undo-redo';
const store = createStore(
reducer,
applyMiddleware(undoRedoMiddleware({ maxHistory: 10, debug: true }))
);2. 撤销操作
当我们需要撤销上一次操作时，我们可以 dispatch 一个 type 字段为 @@redux-undo/UNDO 的 action。
store.dispatch({ type: '@@redux-undo/UNDO' });此时，redux-undo 会找到上一次的 action，将其执行的结果还原，并将当前状态更新为上一次的状态。并在调试模式下输出相关信息。
3. 重做操作
当我们需要重做上一次撤销的操作时，我们可以 dispatch 一个 type 字段为 @@redux-undo/REDO 的 action。
store.dispatch({ type: '@@redux-undo/REDO' });此时，redux-undo 会找到下一次的 action，将其执行的结果应用到当前的状态中，并将当前状态更新为下一次的状态。并在调试模式下输出相关信息。
4. 定制化操作
除了使用默认的撤销和重做操作以外，我们还可以通过定制化的方式来实现自己的操作。
我们可以在创建 store 的时候，在配置信息中添加 onUndo 和 onRedo 两个钩子函数。当我们执行撤销或者重做操作时，redux-undo 就会自动调用这两个函数。
例如，我们可以在执行撤销操作时，打印出要撤销的操作的相关信息。
-- -------------------- ---- -------
----- ----- - ------------
--------
----------------
--------------------
------- -------- ------------- ---------------- -- -
----------------- --------------- -------------------------------------
--
--
-
--示例代码
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ------------------ ---- --------------------------
-- --- -----
----- ------------ - -
------ --
--
-- -------
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------
------ -
---------
------ ----------- - --
--
---- -----------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
-
-- -- -----
----- ----- - ------------
--------
----------------
--------------------
----------- ---
------- -------- ------------- ---------------- -- -
----------------- --------------- -------------------------------------
--
------- -------- ------------- ------------ -- -
----------------- --------------- ---------------------------------
--
------ -----
--
-
--
-- --------- ----- -----------
------------------ -- -
------------------------------
---
-- ----
---------------- ----- ----- ---
---------------- ----- ----- ---
---------------- ----- ---------- ---
---------------- ----- ----- ---
---------------- ----- ------------------- ---
---------------- ----- ------------------- ---输出结果：
-- -------------------- ---- ------- - ------ - - - ------ - - - ------ - - - ------ - - ------ ----------- -------------- ----- ------- ----------- ----- ------ ----------- ---- ---- ------------------------- - ------ - - ------ ----------- -------------- ----- ------- ----------- ----- ------ ----------- ---- ---- ------------------------------------------------------------------------- - ------ - -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f8a238a385564ab6e04