redux-undo-immutable 是一个 npm 包，它是一个 redux 插件，支持在 redux 应用程序中实现撤销/重做功能。与其他 redux 插件不同，redux-undo-immutable 使得你可以很容易地管理不可变（immutable）的状态，同时也支持你撤销 / 重做异步的 redux 操作。redux-undo-immutable 支持对状态做出更改且保证数据的不可变性，提高了代码的可重复性。
安装
你需要先安装 redux-undo-immutable，在你的项目目录下执行以下命令：
npm install redux-undo-immutable --save
使用
把 redux-undo-immutable 插件添加到你的 store 中，并在 actions 中添加撤销和重做的 action。
配置
-- -------------------- ---- ------- ------ --------- - ------------- - ---- ---------------------- ------ - ----------- - ---- ------- ------ ----------- ---- ------------------ ----- ------------ - - ------ -- - ----- --------------- - --------------------- - ------ --- ------- ---------------- -- ----- ----- - ---------------------------- -------------
添加撤销和重做的 action
使用 redux-undo-immutable 中提供的 ActionTypes 来获取撤销和重做的 actionType，然后在你的 action creators 中添加。
-- -------------------- ---- -------
------ - ----------- -- --------------- - ---- ----------------------
------ -------- ------ -
------ -
----- ---------------------
-
-
------ -------- ------ -
------ -
----- ---------------------
-
-限制历史记录长度
使用 undoable() 的第二个参数 options 来限制历史记录长度。
const undoableReducer = undoable(rootReducer, {
limit: 10,
})过滤器
使用 undoable() 的第二个参数 options 来添加一个过滤器。
import { distinctState } from 'redux-undo-immutable'
const undoableReducer = undoable(rootReducer, {
filter: distinctState(),
})distinctState() 过滤器将忽略与之前存储的状态相等的动作。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ --------- - ------------- - ---- ----------------------
------ - ----------- - ---- -------
----- ------------ - -
------ --
-
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - -
---- ------------
------ - ------ ----------- - - -
--------
------ -----
-
-
----- --------------- - ----------------- -
------ ---
------- ----------------
--
----- ----- - ---------------------------- -------------
---------------- ----- ----------- --
---------------- ----- ----------- --
---------------- ----- ----------- --
---------------- ----- ----------- --
----------------------------- -- - ------ - -
---------------- ----- ------ --
----------------------------- -- - ------ - -总结
使用 redux-undo-immutable 可以很容易地实现 redux 应用程序中的撤销/重做功能，并保证数据的不可变性。其提供了很多选项来定制历史记录，如限制历史记录长度、添加过滤器等。在开发中，我们可以根据业务需求，通过 redux-undo-immutable 实现更加优秀的 redux 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700fe361a36e0bce8d67