Redux-Undo 技术解析：为 Redux 应用实现撤销/重做功能-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00761/article/details/148756502

Redux-Undo 技术解析：为 Redux 应用实现撤销/重做功能

redux-undo :recycle: higher order reducer to add undo/redo functionality to redux state containers 项目地址: https://gitcode.com/gh_mirrors/re/redux-undo

前言

在现代前端应用中，撤销（Undo）和重做（Redo）功能是提升用户体验的重要特性。本文将深入解析 Redux-Undo 这个专门为 Redux 设计的撤销/重做解决方案，帮助开发者理解其原理并掌握使用方法。

Redux-Undo 概述

Redux-Undo 是一个 Redux 的 reducer 增强器（higher-order reducer），它能够为任何 Redux reducer 添加撤销和重做功能，而无需修改原有 reducer 的逻辑。

核心特点

非侵入式设计：不改变原有 reducer 的工作方式
灵活配置：支持多种自定义选项
状态隔离：可以针对特定状态片段应用撤销功能
丰富的 API：提供多种撤销/重做操作方式

安装与基本使用

安装

使用 npm 或 yarn 进行安装：

npm install --save redux-undo
# 或
yarn add redux-undo

基本集成

import { combineReducers } from 'redux';
import undoable from 'redux-undo';

const rootReducer = combineReducers({
  counter: undoable(counterReducer)
});

核心概念解析

状态结构

应用 Redux-Undo 后，状态结构变为：

{
  past: [...过去的状态...],
  present: {...当前状态...},
  future: [...未来的状态...]
}

访问当前状态需要使用 state.present，而不是直接访问状态。

操作 API

Redux-Undo 提供了丰富的操作 API：

import { ActionCreators } from 'redux-undo';

// 基本撤销/重做
store.dispatch(ActionCreators.undo());
store.dispatch(ActionCreators.redo());

// 多步跳转
store.dispatch(ActionCreators.jump(-2)); // 撤销2步
store.dispatch(ActionCreators.jump(5));  // 重做5步

// 精确跳转
store.dispatch(ActionCreators.jumpToPast(index));
store.dispatch(ActionCreators.jumpToFuture(index));

// 清除历史
store.dispatch(ActionCreators.clearHistory());

高级配置

Redux-Undo 提供了多种配置选项来满足不同需求：

常用配置项

undoable(reducer, {
  limit: 10, // 历史记录限制
  filter: (action) => action.includeInHistory, // 过滤不需要记录的动作
  undoType: 'CUSTOM_UNDO', // 自定义撤销动作类型
  redoType: 'CUSTOM_REDO', // 自定义重做动作类型
  debug: true // 开启调试模式
});

动作过滤

可以通过 includeAction 和 excludeAction 辅助函数来过滤动作：

import { includeAction, excludeAction } from 'redux-undo';

undoable(reducer, {
  filter: includeAction(['ADD_TODO', 'REMOVE_TODO'])
});

// 或者
undoable(reducer, {
  filter: excludeAction(['TOGGLE_TODO'])
});

动作分组

可以将连续的动作合并为一个历史记录点：

import { groupByActionTypes } from 'redux-undo';

undoable(reducer, {
  groupBy: groupByActionTypes(['INCREMENT'])
});

最佳实践

局部撤销

建议只对需要撤销功能的状态片段应用 Redux-Undo：

const rootReducer = combineReducers({
  ui: uiReducer, // 不需要撤销
  document: undoable(documentReducer) // 需要撤销
});

多历史记录

可以为不同状态片段配置独立的历史记录：

const rootReducer = combineReducers({
  doc1: undoable(docReducer, { undoType: 'DOC1_UNDO' }),
  doc2: undoable(docReducer, { undoType: 'DOC2_UNDO' })
});

实现原理

Redux-Undo 的核心原理是：

拦截所有动作
在执行原有 reducer 前保存当前状态到 past 数组
执行原有 reducer 获取新状态
将新状态存入 present
清除 future 数组（因为新动作改变了历史）

当执行撤销操作时：

从 past 取出最近的状态
将当前状态移入 future
恢复取出的状态为当前状态

常见问题解决

状态访问

应用 Redux-Undo 后，需要从 state.present 访问当前状态：

// 之前
const value = state.counter;

// 之后
const value = state.counter.present;

初始状态处理

可以通过两种方式设置初始状态：

// 简单方式
const store = createStore(undoable(reducer), initialState);

// 完整历史方式
const initialHistory = {
  past: [state1, state2],
  present: state3,
  future: [state4, state5]
};
const store = createStore(undoable(reducer), initialHistory);