简介
redux-undoredo 是一个专门用于 Redux 的中间件，它可以帮助我们实现撤销和重做的功能，非常适合用于编辑器类应用的开发中。它的使用非常方便，只需要简单地添加到 Redux 应用中即可。
安装
可以通过 npm 进行安装：
npm install redux-undoredo
配置
引入
redux-undoredo 的使用非常简单，只需要将其引入即可。在 Redux 应用中，我们需要将其作为中间件添加到 applyMiddleware() 方法中：
import { createStore, applyMiddleware } from 'redux';
import undoRedoMiddleware from 'redux-undoredo';
const store = createStore(
rootReducer,
applyMiddleware(undoRedoMiddleware)
);配置
redux-undoredo 支持自定义配置，可以通过传递配置项到中间件中进行配置。常用的配置项包括 limit、debug 和 blacklist。其中，limit 用于限制撤销和重做的最大次数，debug 用于开启调试模式，blacklist 用于指定不需要执行记录的 action 类型。例如：
-- -------------------- ---- ------- ----- ---------------- - - ------ --- ------ ----- ---------- --------- --------- -- ----- ----- - ------------ ------------ ----------------------------------------------------- --
使用
撤销和重做
redux-undoredo 中提供了两个 action，即 UNDO 和 REDO，用于执行撤销和重做操作。当中间件安装成功后，在 Redux 应用中的 action 中就可以使用这两个 action：
-- -------------------- ---- -------
----- ---------- - -- -- -
------ -
----- ------------------
--
--
----- ---------- - -- -- -
------ -
----- ------
--
--
----- ---------- - -- -- -
------ -
----- ------
--
--记录状态
在 Redux 应用中，我们需要记录状态才可以执行撤销和重做。因此，我们需要在 reducer 中添加相应的代码来记录状态，并根据 action 类型来执行撤销和重做操作。例如：
-- -------------------- ---- -------
----- ------------ - -
------ -
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
---- -------
-- ------
------ ------
---- -------
-- ------
------ ------
--------
------ ------
-
--示例代码
下面是一个完整的撤销和重做的示例代码：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ------------------ ---- -----------------
----- ------------ - -
------ -
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
---- -------
-- ------
------ -------------- -- ------
---- -------
-- ------
------ -------------- -- ------
--------
------ ------
-
--
----- ---------------- - -
------ ---
------ -----
---------- --
--
----- ----- - ------------
--------
-----------------------------------------------------
--
---------------- ----- ----------- --- -- ------ -
---------------- ----- ----------- --- -- ------ -
---------------- ----- ----------- --- -- ------ -
---------------- ----- ------ --- -- ------ -
---------------- ----- ------ --- -- ------ -总结
redux-undoredo 是一个非常方便的 Redux 中间件，它可以帮助我们实现撤销和重做的功能。在实际开发中，我们可以根据需要进行配置，然后在 action 中使用 UNDO 和 REDO action 来执行撤销和重做操作，非常方便实用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672681e8991b448e3a2f