How to implement the undo and redo function in Immutable.js (detailed tutorial)

This article mainly introduces the undo and redo function based on Immutable.js and some things that need attention. Friends in need can refer to it

The functions of browsers are becoming more and more powerful, and many of them were originally developed by other The functions provided by the client are gradually transferred to the front end, and front-end applications are becoming more and more complex. Many front-end applications, especially some online editing software, need to continuously process user interactions when running, and provide an undo and redo function to ensure smooth interaction. However, implementing the undo and redo function for an application is not an easy task. The official Redux documentation introduces how to implement the undo and redo function in redux applications. The undo function based on redux is a top-down solution: after introducing redux-undo , all operations become "undoable", and then we continue to modify its configuration to make the undo function more and more convenient. The better (this is also redux-undo The reason why there are so many configuration items).

This article will adopt a bottom-up approach, taking a simple online drawing tool as an example, and using TypeScript and Immutable.js to implement a practical "undo and redo" function. The general effect is shown in the figure below:

Step 1: Determine which states require historical records and create a custom State class

Not all states require history records. Many states are very trivial, especially those related to mouse or keyboard interaction. For example, when dragging a graphic in the drawing tool, we need to set a "drag-in-progress" mark, and the page will display the corresponding Drag prompt, obviously the drag mark should not appear in the history; and other states cannot be revoked or do not need to be revoked, such as the web page window size, the list of requests sent to the background, etc.

Excluding those states that do not require history records, we encapsulate the remaining states with Immutable Record and define the State class:

// State.ts
import { Record, List, Set } from 'immutable'
const StateRecord = Record({
 items: List<Item>
 transform: d3.ZoomTransform
 selection: number
})
// 用类封装，便于书写 TypeScript，注意这里最好使用Immutable 4.0 以上的版本
export default class State extends StateRecord {}

Our example here is a simple online drawing tool, so the State class above contains three fields. items is used to record the drawn graphics, transform is used to record the panning and zooming status of the drawing board, and selection indicates the current selection. The ID of the graphic. Other states in the drawing tool, such as graphic drawing preview, automatic alignment configuration, operation prompt text, etc., are not placed in the State class.

Step 2: Define the Action base class and create corresponding Action subclasses for each different operation

The difference from redux-undo is that we still Adopt the command mode: define the base class Action, and all operations on State are encapsulated as an instance of Action; define several subclasses of Action, corresponding to different types of operations.

In TypeScript, it is more convenient to define the Action base class with Abstract Class.

// actions/index.ts
export default abstract class Action {
 abstract next(state: State): State
 abstract prev(state: State): State
 prepare(appHistory: AppHistory): AppHistory { return appHistory }
 getMessage() { return this.constructor.name }
}

The next method of the Action object is used to calculate the "next state", and the prev method is used to calculate the "previous state". The getMessage method is used to obtain a brief description of the Action object. Through the getMessage method, we can display the user's operation records on the page, making it easier for users to understand what happened recently. The prepare method is used to "prepare" the Action before it is applied for the first time. The definition of AppHistory will be given later in this article.

Action subclass example

The following AddItemAction is a typical Action subclass, used to express "add a new graphic".

// actions/AddItemAction.ts
export default class AddItemAction extends Action {
 newItem: Item
 prevSelection: number
 constructor(newItem: Item) {
 super()
 this.newItem = newItem
 }
 prepare(history: AppHistory) {
 // 创建新的图形后会自动选中该图形，为了使得撤销该操作时 state.selection 变为原来的值
 // prepare 方法中读取了「添加图形之前 selection 的值」并保存到 this.prevSelection
 this.prevSelection = history.state.selection
 return history
 }
 next(state: State) {
 return state
  .setIn(['items', this.newItem.id], this.newItem)
  .set('selection', this.newItemId)
 }
 prev(state: State) {
 return state
  .deleteIn(['items', this.newItem.id])
  .set('selection', this.prevSelection)
 }
 getMessage() { return `Add item ${this.newItem.id}` }
}

Runtime behavior

When the application is running, user interaction generates an Action stream , every time an Action object is generated, we call the next method of the object to calculate the next state, and then save the action to a list for later use; when the user performs an undo operation, we take the latest Action from the action list And call its prev method. When the application is running, the next/prev method is called roughly as follows:

// initState 是一开始就给定的应用初始状态
// 某一时刻，用户交互产生了 action1 ...
state1 = action1.next(initState)
// 又一个时刻，用户交互产生了 action2 ...
state2 = action2.next(state1)
// 同样的，action3也出现了 ...
state3 = action3.next(state2)
// 用户进行撤销，此时我们需要调用最近一个action的prev方法
state4 = action3.prev(state3)
// 如果再次进行撤销，我们从action列表中取出对应的action，调用其prev方法
state5 = action2.prev(state4)
// 重做的时候，取出最近一个被撤销的action，调用其next方法
state6 = action2.next(state5)
Applied-Action

In order to facilitate the subsequent explanation, we make a simple definition of Applied-Action :Applied-Action refers to those actions whose operation results have been reflected in the current application state; when the next method of the action is executed, the action becomes applied; when the prev method is executed, the action becomes unapplied.

Step 3: Create the history container AppHistory

The previous State class is used to represent the state of the application at a certain moment. Next, we define the AppHistory class to represent App history. Similarly, we still use Immutable Record to define history records. The state field is used to express the current application status, the list field is used to store all actions, and the index field is used to record the subscript of the latest applied-action. The historical status of the application can be calculated through the undo/redo method. The apply method is used to add and execute specific Actions to AppHistory. The specific code is as follows:

// AppHistory.ts
const emptyAction = Symbol('empty-action')
export const undo = Symbol('undo')
export type undo = typeof undo // TypeScript2.7之后对symbol的支持大大增强
export const redo = Symbol('redo')
export type redo = typeof redo
const AppHistoryRecord = Record({
 // 当前应用状态
 state: new State(),
 // action 列表
 list: List<Action>(),
 // index 表示最后一个applied-action在list中的下标。-1 表示没有任何applied-action
 index: -1,
})
export default class AppHistory extends AppHistoryRecord {
 pop() { // 移除最后一项操作记录
 return this
  .update(&#39;list&#39;, list => list.splice(this.index, 1))
  .update(&#39;index&#39;, x => x - 1)
 }
 getLastAction() { return this.index === -1 ? emptyAction : this.list.get(this.index) }
 getNextAction() { return this.list.get(this.index + 1, emptyAction) }
 apply(action: Action) {
 if (action === emptyAction) return this
 return this.merge({
  list: this.list.setSize(this.index + 1).push(action),
  index: this.index + 1,
  state: action.next(this.state),
 })
 }
 redo() {
 const action = this.getNextAction()
 if (action === emptyAction) return this
 return this.merge({
  list: this.list,
  index: this.index + 1,
  state: action.next(this.state),
 })
 }
 undo() {
 const action = this.getLastAction()
 if (action === emptyAction) return this
 return this.merge({
  list: this.list,
  index: this.index - 1,
  state: action.prev(this.state),
 })
 }
}

第四步：添加「撤销重做」功能

假设应用中的其他代码已经将网页上的交互转换为了一系列的 Action 对象，那么给应用添上「撤销重做」功能的大致代码如下：

type HybridAction = undo | redo | Action
// 如果用Redux来管理状态，那么使用下面的reudcer来管理那些「需要历史记录的状态」
// 然后将该reducer放在应用状态树中合适的位置
function reducer(history: AppHistory, action: HybridAction): AppHistory {
 if (action === undo) {
 return history.undo()
 } else if (action === redo) {
 return history.redo()
 } else { // 常规的 Action
 // 注意这里需要调用prepare方法，好让该action「准备好」
 return action.prepare(history).apply(action)
 }
}
// 如果是在 Stream/Observable 的环境下，那么像下面这样使用 reducer
const action$: Stream<HybridAction> = generatedFromUserInteraction
const appHistory$: Stream<AppHistory> = action$.fold(reducer, new AppHistory())
const state$ = appHistory$.map(h => h.state)
// 如果是用回调函数的话，大概像这样使用reducer
onActionHappen = function (action: HybridAction) {
 const nextHistory = reducer(getLastHistory(), action)
 updateAppHistory(nextHistory)
 updateState(nextHistory.state)
}

第五步：合并 Action，完善用户交互体验

通过上面这四个步骤，画图工具拥有了撤消重做功能，但是该功能用户体验并不好。在画图工具中拖动一个图形时，MoveItemAction 的产生频率和 mousemove 事件的发生频率相同，如果我们不对该情况进行处理，MoveItemAction 马上会污染整个历史记录。我们需要合并那些频率过高的 action，使得每个被记录下来的 action 有合理的撤销粒度。

每个 Action 在被应用之前，其 prepare 方法都会被调用，我们可以在 prepare 方法中对历史记录进行修改。例如，对于 MoveItemAction，我们判断上一个 action 是否和当前 action 属于同一次移动操作，然后来决定在应用当前 action 之前是否移除上一个 action。代码如下：

// actions/MoveItemAction.ts
export default class MoveItemAction extends Action {
 prevItem: Item
 // 一次图形拖动操作可以由以下三个变量来进行描述：
 // 拖动开始时鼠标的位置(startPos)，拖动过程中鼠标的位置(movingPos)，以及拖动的图形的 ID
 constructor(readonly startPos: Point, readonly movingPos: Point, readonly itemId: number) {
 // 上一行中 readonly startPos: Point 相当于下面两步：
 // 1. 在MoveItemAction中定义startPos只读字段
 // 2. 在构造函数中执行 this.startPos = startPos
 super()
 }
 prepare(history: AppHistory) {
 const lastAction = history.getLastAction()
 if (lastAction instanceof MoveItemAction && lastAction.startPos == this.startPos) {
  // 如果上一个action也是MoveItemAction，且拖动操作的鼠标起点和当前action相同
  // 则我们认为这两个action在同一次移动操作中
  this.prevItem = lastAction.prevItem
  return history.pop() // 调用pop方法来移除最近一个action
 } else {
  // 记录图形被移动之前的状态，用于撤销
  this.prevItem = history.state.items.get(this.itemId)
  return history
 }
 }
 next(state: State): State {
 const dx = this.movingPos.x - this.startPos.x
 const dy = this.movingPos.y - this.startPos.y
 const moved = this.prevItem.move(dx, dy)
 return state.setIn(['items', this.itemId], moved)
 }
 prev(state: State) {
 // 撤销的时候我们直接使用已经保存的prevItem即可
 return state.setIn(['items', this.itemId], this.prevItem)
 }
 getMessage() { /* ... */ }
}

从上面的代码中可以看到，prepare 方法除了使 action 自身准备好之外，它还可以让历史记录准备好。不同的 Action 类型有不同的合并规则，为每种 Action 实现合理的 prepare 函数之后，撤消重做功能的用户体验能够大大提升。

一些其他需要注意的地方

撤销重做功能是非常依赖于不可变性的，一个 Action 对象在放入 AppHistory.list 之后，其所引用的对象都应该是不可变的。如果 action 所引用的对象发生了变化，那么在后续撤销时可能发生错误。本方案中，为了方便记录操作发生时的一些必要信息，Action 对象的 prepare 方法中允许出现原地修改操作，但是 prepare 方法只会在 action 被放入历史记录之前调用一次，action 一旦进入纪录列表就是不可变的了。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

vue页面离开后执行函数的实例

vue轮播图插件vue-concise-slider的使用

vue加载自定义的js文件方法

The above is the detailed content of How to implement the undo and redo function in Immutable.js (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!