在前端开发中，状态管理是一个很重要的问题。Redux 是最流行的 JavaScript 状态管理库之一，它提供了一种可预测、一致和透明的状态管理方案。其中一个重要的功能是回退和重做，让用户可以撤销操作和重新执行已撤销的操作，提高用户体验。
回退和重做的概念
回退和重做是用户操作的两个重要功能，它们分别表示：
- 回退：撤销之前的某一个操作，让状态回到之前的状态。
- 重做：重新执行之前撤销的操作，让状态回到之前未被撤销的状态。
在 Redux 中，我们可以通过实现一个 undo/redo 操作的功能来实现回退和重做。
实现 undo/redo 操作
下面我们将介绍如何在 Redux 中实现一个 undo/redo 操作的功能。
1. 定义 action 和 reducer
首先，我们需要定义两个 action：UNDO 和 REDO，表示回退和重做操作。同时，我们需要为 state 添加一个历史记录数组，并在 reducer 中处理这两个 action。
-- -------------------- ---- -------
----- ---- - -------
----- ---- - -------
----- ------------ - -
------ --
-------- --- -- ------
-
-------- ------------- - ------------- ------- -
------ ------------- -
---- -----
-- --------------------- --- -- -
------ ------
-
------ -
---------
------ ---------------------------------- - ---
-------- ---------------------- ----
--
---- -----
------ -
---------
------ ---------------
-------- ------------------ ----------------
--
--------
------ ------
-
-在 reducer 中，我们首先定义了 initialState，包含当前状态 count 和历史记录数组 history。当触发回退操作时，我们从 history 数组中取出最后一个状态，为 count 赋值，同时将该状态从 history 数组中移除。当触发重做操作时，我们将传入的值 payload 添加到 history 数组中，并将 count 设为该值。
2. 创建 action creators
接下来，我们需要创建两个 action creators：undo 和 redo。
function undo() {
return { type: UNDO };
}
function redo(payload) {
return { type: REDO, payload };
}这里的 undo 和 redo 函数分别返回 UNDO 和 REDO action，并分别没有传递 payload 和传递了 payload。payload 表示这个 action 对应的状态。
3. 创建 store
接下来，我们需要创建 Redux store，其中包含我们定义的 reducer 和初始状态。
import { createStore } from 'redux';
const store = createStore(reducer); // 创建 Redux store4. 绑定 UI
最后，我们需要将 Redux store 中的状态绑定到 UI 上，并在 UI 上触发 undo 和 redo 操作。
-- -------------------- ---- ------- ----- ------------ - --------------------------------- ----- ----------- - -------------------------------- ----- ----------- - -------------------------------- -------- -------- - ----- ----- - ----------------- ---------------------- - ------- ---------------- - ------------------------ ------------------------------------- -- -- ------------------------ ------------------------------------- -- -- ------------------------------------------------------ - ------
在这个示例中，我们将 Redux store 中的状态绑定到 countElement 上，并监听 store 变化，当 store 发生变化时重新渲染。同时，在 undoElement 和 redoElement 上分别绑定 undo 和 redo 操作，当点击这两个按钮时触发相应的操作。
总结
本文中，我们介绍了在 Redux 中实现回退和重做操作的方法，包括定义 action 和 reducer、创建 action creators、创建 store 和绑定 UI。通过这种方法，我们可以为用户提供更好的体验，让用户可以撤销和重做操作，提高用户满意度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6491239348841e9894f297f1