Immutable.js怎樣實(shí)現(xiàn)撤銷重做效果

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

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

// actions/AddItemAction.ts
export default class AddItemAction extends Action {
 newItem: Item
 prevSelection: number
 constructor(newItem: Item) {
 super()
 this.newItem = newItem
 }
 prepare(history: AppHistory) {
 // 創(chuàng)建新的圖形后會自動(dòng)選中該圖形，為了使得撤銷該操作時(shí) state.selection 變?yōu)樵瓉淼闹? // 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}` }
}

// initState 是一開始就給定的應(yīng)用初始狀態(tài)
// 某一時(shí)刻，用戶交互產(chǎn)生了 action1 ...
state1 = action1.next(initState)
// 又一個(gè)時(shí)刻，用戶交互產(chǎn)生了 action2 ...
state2 = action2.next(state1)
// 同樣的，action3也出現(xiàn)了 ...
state3 = action3.next(state2)
// 用戶進(jìn)行撤銷，此時(shí)我們需要調(diào)用最近一個(gè)action的prev方法
state4 = action3.prev(state3)
// 如果再次進(jìn)行撤銷，我們從action列表中取出對應(yīng)的action，調(diào)用其prev方法
state5 = action2.prev(state4)
// 重做的時(shí)候，取出最近一個(gè)被撤銷的action，調(diào)用其next方法
state6 = action2.next(state5)
Applied-Action

// AppHistory.ts
const emptyAction = Symbol('empty-action')
export const undo = Symbol('undo')
export type undo = typeof undo // TypeScript2.7之后對symbol的支持大大增強(qiáng)
export const redo = Symbol('redo')
export type redo = typeof redo
const AppHistoryRecord = Record({
 // 當(dāng)前應(yīng)用狀態(tài)
 state: new State(),
 // action 列表
 list: List<Action>(),
 // index 表示最后一個(gè)applied-action在list中的下標(biāo)。-1 表示沒有任何applied-action
 index: -1,
})
export default class AppHistory extends AppHistoryRecord {
 pop() { // 移除最后一項(xiàng)操作記錄
 return this
 .update('list', list => list.splice(this.index, 1))
 .update('index', 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),
 })
 }
}

type HybridAction = undo | redo | Action
// 如果用Redux來管理狀態(tài)，那么使用下面的reudcer來管理那些「需要?dú)v史記錄的狀態(tài)」
// 然后將該reducer放在應(yīng)用狀態(tài)樹中合適的位置
function reducer(history: AppHistory, action: HybridAction): AppHistory {
 if (action === undo) {
 return history.undo()
 } else if (action === redo) {
 return history.redo()
 } else { // 常規(guī)的 Action
 // 注意這里需要調(diào)用prepare方法，好讓該action「準(zhǔn)備好」
 return action.prepare(history).apply(action)
 }
}
// 如果是在 Stream/Observable 的環(huán)境下，那么像下面這樣使用 reducer
const action$: Stream<HybridAction> = generatedFromUserInteraction
const appHistory$: Stream<AppHistory> = action$.fold(reducer, new AppHistory())
const state$ = appHistory$.map(h => h.state)
// 如果是用回調(diào)函數(shù)的話，大概像這樣使用reducer
onActionHappen = function (action: HybridAction) {
 const nextHistory = reducer(getLastHistory(), action)
 updateAppHistory(nextHistory)
 updateState(nextHistory.state)
}

// actions/MoveItemAction.ts
export default class MoveItemAction extends Action {
 prevItem: Item
 // 一次圖形拖動(dòng)操作可以由以下三個(gè)變量來進(jìn)行描述：
 // 拖動(dòng)開始時(shí)鼠標(biāo)的位置(startPos)，拖動(dòng)過程中鼠標(biāo)的位置(movingPos)，以及拖動(dòng)的圖形的 ID
 constructor(readonly startPos: Point, readonly movingPos: Point, readonly itemId: number) {
 // 上一行中 readonly startPos: Point 相當(dāng)于下面兩步：
 // 1. 在MoveItemAction中定義startPos只讀字段
 // 2. 在構(gòu)造函數(shù)中執(zhí)行 this.startPos = startPos
 super()
 }
 prepare(history: AppHistory) {
 const lastAction = history.getLastAction()
 if (lastAction instanceof MoveItemAction && lastAction.startPos == this.startPos) {
 // 如果上一個(gè)action也是MoveItemAction，且拖動(dòng)操作的鼠標(biāo)起點(diǎn)和當(dāng)前action相同
 // 則我們認(rèn)為這兩個(gè)action在同一次移動(dòng)操作中
 this.prevItem = lastAction.prevItem
 return history.pop() // 調(diào)用pop方法來移除最近一個(gè)action
 } else {
 // 記錄圖形被移動(dòng)之前的狀態(tài)，用于撤銷
 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) {
 // 撤銷的時(shí)候我們直接使用已經(jīng)保存的prevItem即可
 return state.setIn(['items', this.itemId], this.prevItem)
 }
 getMessage() { /* ... */ }
}