随着前端项目的日益复杂，管理状态变得越来越重要。redux 是一个流行的状态管理库，但是，在实际开发中，我们经常需要撤销和重做操作。这时我们可以使用 regular-redux-undo 这个 npm 包来帮助我们管理 redux 中的撤销和重做操作。
安装
npm install regular-redux-undo
使用
创建 redoUndo 中间件
在 redux 中，我们使用 middleware 来处理和扩展 action。下面是如何使用 redux-undo。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- ------- ------ -------- ---- -------------------- ------ ----------- ---- ------------------ ----- ------------------ - ---------- ----- ----- - ------------ ---------------------- ----------------------------------- -
actions
使用 regular-redux-undo，我们需要定义一些 action，以便撤销和重做操作。
-- -------------------- ---- ------- ------ ----- ------- - ---- -- -- ----- ----------- -------- ---- -- ------ ----- ---------- - ----- -- -- ----- -------------- -------- ----- -- ------ ----- ---------- - ----- -- -- ----- -------------- -------- ----- --
reducers
下面是一个简单的 reducer，其中包含我们上面定义的 action。
-- -------------------- ---- -------
------ ------- -------- ----------- - --- ------- -
------ ------------- -
---- -----------
------ ---------- - ----- --------------- ---------- ----- --
---- --------------
------ ---------------- ------ --
----- --- --------------
- - -------- ---------- --------------- -
- ----
-
---- --------------
------ ---------------- ------ -- ----- --- ---------------
--------
------ -----
-
-然后将 reducer 包装成一个可撤销和重做的 reducer。
import undoable from 'regular-redux-undo' import todos from './todos' const undoableTodos = undoable(todos) export default undoableTodos
完整示例
下面是一个完整的示例。我们可以添加、删除及撤销和重做操作。下面的代码仅供参考，具体实现可以因项目而异。
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ - ------------ ----------- - ---- -------------
------ -
--------
-----------
----------
- ---- ------------
----- ---- - -- ----- ----- -- -- -
----- -------- - -------------
------ -
----
-----
-------- --------------- -------------- - -------------- - ------ --
----------- -- ----------------------------
-
-----------
-------
------- ----------- -- --------------------------------------------
-----
-
-
----- -------- - -- -- -
----- ----- - ----------------- -- --------------
------ -
----
----------------- ------ -- -
----- ----------- ------------- ----------- --
---
-----
-
-
----- --- - -- -- -
----- ------------ -------------- - ------------
----- -------- - -------------
----- ------------ - - -- -
------------------
-----------------------------
-----------------
-
------ -
-----
------ -- ---------
----- ------------------------
------ ------------------ ----------- -- ------------------------------ --
------- --------------------------
-------
--------- --
------
-
-
------ ------- ---总结
在本文中，我们介绍了如何使用由 regular-redux-undo 这个 npm 包管理 redux 中的撤销和重做操作。重要的是，我们更深入地了解了如何实现并使用 middleware，以及如何包装 reducer。如果你的应用需要管理历史记录，这个 npm 包将非常有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb081e8991b448dc430