Immutable.js에서 실행 취소 및 다시 실행 기능을 구현하는 방법(자세한 튜토리얼)

이 글에서는 Immutable.js를 기반으로 한 실행 취소 및 다시 실행 기능과 주의가 필요한 사항을 주로 소개합니다. 도움이 필요한 친구가 참고할 수 있습니다.

브라우저가 점점 더 강력해지고 있으며, 원래 다른 클라이언트에서 제공했던 많은 기능이 점차 이동하고 있습니다. 프런트엔드에 이르기까지 프런트엔드 애플리케이션은 점점 더 복잡해지고 있습니다. 많은 프런트 엔드 애플리케이션, 특히 일부 온라인 편집 소프트웨어는 작업 중에 사용자 상호 작용을 지속적으로 처리해야 하며 원활한 상호 작용을 보장하기 위해 실행 취소 및 다시 실행 기능을 제공해야 합니다. 그러나 애플리케이션에 대한 실행 취소 및 다시 실행 기능을 구현하는 것은 쉬운 작업이 아닙니다. 공식 Redux 문서에는 Redux 애플리케이션에서 실행 취소 및 다시 실행 기능을 구현하는 방법이 소개되어 있습니다. Redux 기반의 실행 취소 기능은 하향식 솔루션입니다. 도입됨 redux-undo 之后所有的操作都变为了「可撤销的」，然后我们不断修改其配置使得撤销功能变得越来越好用（这也是 redux-undo 구성 항목이 많은 이유).

이 기사에서는 간단한 온라인 그리기 도구를 예로 들어 TypeScript 및 Immutable.js를 사용하여 실용적인 "실행 취소 및 다시 실행" 기능을 구현하는 상향식 접근 방식을 채택합니다. 대략적인 효과는 아래 그림과 같습니다.

1단계: 기록 레코드가 필요한 주를 결정하고 사용자 정의 State 클래스를 만듭니다.

모든 주에 기록 레코드가 필요한 것은 아닙니다. 많은 상태는 매우 사소한데, 특히 마우스나 키보드 상호 작용과 관련된 상태입니다. 예를 들어 그리기 도구에서 그래픽을 드래그할 때 "드래그 진행 중" 표시를 설정해야 하며 페이지에 해당 드래그 프롬프트가 표시됩니다. , 드래그 표시는 기록에 표시되어서는 안 되며, 웹 페이지 창 크기, 백그라운드로 전송된 요청 목록 등과 같은 다른 상태는 취소할 수 없거나 취소할 필요가 없습니다.

기록 레코드가 필요하지 않은 상태를 제외하고 나머지 상태를 Immutable Record로 캡슐화하고 State 클래스를 정의합니다.

// 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 {}

여기 예제는 간단한 온라인 그리기 도구이므로 위의 State 클래스에는 다음이 포함됩니다. 세 개의 필드는 그려진 그래픽을 기록하는 데 사용되고, 변환은 아트보드의 이동 및 확대/축소 상태를 기록하는 데 사용되며, 선택 항목은 현재 선택한 그래픽의 ID를 나타냅니다. 그래픽 그리기 미리보기, 자동 정렬 구성, 작업 프롬프트 텍스트 등과 같은 그리기 도구의 다른 상태는 State 클래스에 배치되지 않습니다.

2단계: Action 기본 클래스를 정의하고 각 작업에 해당하는 Action 하위 클래스를 만듭니다.

redux-undo와의 차이점은 여전히 ​​명령 모드를 사용한다는 것입니다. 기본 클래스 Action과 모든 State All 쌍을 정의합니다. 작업은 Action의 인스턴스로 캡슐화되며 다양한 작업 유형에 해당하는 Action의 여러 하위 클래스를 정의합니다.

TypeScript에서는 Abstract Class로 Action 기본 클래스를 정의하는 것이 더 편리합니다.

// 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 }
}

Action 객체의 next 메소드는 "다음 상태"를 계산하는데 사용되고, prev 메소드는 "이전 상태"를 계산하는데 사용됩니다. getMessage 메소드는 Action 객체에 대한 간단한 설명을 얻는 데 사용됩니다. getMessage 메소드를 통해 사용자의 작업 기록을 페이지에 표시할 수 있어 사용자가 최근에 발생한 일을 더 쉽게 이해할 수 있습니다. prepare 메소드는 처음으로 적용되기 전에 Action을 "준비"하는 데 사용됩니다. AppHistory의 정의는 이 문서의 뒷부분에서 제공됩니다.

Action 하위 클래스 예

다음 AddItemAction은 "새 그래픽 추가"를 표현하는 데 사용되는 일반적인 Action 하위 클래스입니다.

// 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}` }
}

런타임 동작

애플리케이션이 실행될 때 사용자 상호 작용은 Action 개체가 생성될 때마다 개체의 다음 메서드를 호출하여 다음 상태를 계산합니다. 그런 다음 나중에 사용할 수 있도록 작업을 목록에 저장합니다. 사용자가 실행 취소 작업을 수행하면 작업 목록에서 가장 최근 작업을 가져와서 해당 prev 메서드를 호출합니다. 애플리케이션이 실행 중일 때 next/prev 메소드는 대략 다음과 같이 호출됩니다.

// 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

다음 설명을 용이하게 하기 위해 Applied-Action을 간단하게 정의합니다. Applied-Action은 다음과 같은 작업 결과를 나타냅니다. 현재 적용 상태의 액션에 반영되며, 액션의 다음 메소드가 실행되면 이전 메소드가 실행될 때 액션이 적용되지 않습니다.

3단계: 기록 컨테이너 AppHistory 만들기

이전 State 클래스는 특정 순간의 애플리케이션 상태를 나타내는 데 사용됩니다. 다음으로 애플리케이션 기록을 나타내는 AppHistory 클래스를 정의합니다. 마찬가지로, 우리는 여전히 Immutable Record를 사용하여 기록 레코드를 정의합니다. 상태 필드는 현재 애플리케이션 상태를 표현하는 데 사용되고, 목록 필드는 모든 작업을 저장하는 데 사용되며, 인덱스 필드는 최근 적용된 작업의 첨자를 기록하는 데 사용됩니다. 실행 취소/재실행 방법을 통해 애플리케이션의 기록 상태를 계산할 수 있습니다. Apply 메소드는 AppHistory에 특정 Action을 추가하고 실행하는 데 사용됩니다. 구체적인 코드는 다음과 같습니다:

// 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文件方法

위 내용은 Immutable.js에서 실행 취소 및 다시 실행 기능을 구현하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!