ImmerJS 中的 Patches 机制详解：实现状态变更追踪与回放

ImmerJS 中的 Patches 机制详解：实现状态变更追踪与回放

immer immerjs/immer: Immer 是一个用于不可变数据处理的 JavaScript 库，可以用于构建不可变数据结构和应用程序，支持多种编程语言和框架，如 JavaScript，TypeScript，React，Angular 等。 项目地址: https://gitcode.com/gh_mirrors/im/immer

什么是 Patches 机制

ImmerJS 的 Patches 机制是一项强大的功能，它能够记录状态变更的增量操作（称为"补丁"）。这些补丁可以用于多种场景，比如跨客户端同步状态、实现撤销/重做功能，或者用于调试追踪状态变化历史。

启用 Patches 功能

从 ImmerJS 6.0 版本开始，Patches 功能需要显式启用：

import { enablePatches } from "immer"
enablePatches()

核心 API 解析

1. produce 的补丁回调

在常规的 produce 函数中，可以添加第三个参数作为补丁回调函数：

produce(
  baseState,
  draft => {
    // 修改 draft
  },
  (patches, inversePatches) => {
    // patches: 正向补丁，用于重放变更
    // inversePatches: 反向补丁，用于撤销变更
  }
)

2. produceWithPatches 快捷方式

ImmerJS 提供了更便捷的 produceWithPatches 方法，直接返回新状态和补丁：

const [nextState, patches, inversePatches] = produceWithPatches(baseState, draft => {
  // 修改 draft
})

3. applyPatches 应用补丁

applyPatches 方法可以将补丁应用到任意状态上：

const newState = applyPatches(baseState, patches)

实际应用场景

1. 临时分支与状态合并

let baseState = { name: "Alice", age: 30 }
let fork = baseState
let changes = [], inverseChanges = []

// 在分支上修改并记录补丁
fork = produce(fork, draft => {
  draft.age = 31
}, (patches, inversePatches) => {
  changes.push(...patches)
  inverseChanges.push(...inversePatches)
})

// 之后可以将变更应用到更新后的 baseState
baseState = applyPatches(baseState, changes)

2. 撤销/重做功能实现

const history = []
const future = []

function updateState(producer) {
  const [newState, patches, inversePatches] = produceWithPatches(currentState, producer)
  history.push(inversePatches)
  future.length = 0 // 清除重做栈
  currentState = newState
}

function undo() {
  if (history.length === 0) return
  const inversePatches = history.pop()
  const [newState, patches] = produceWithPatches(currentState, draft => {
    applyPatches(draft, inversePatches)
  })
  future.push(patches)
  currentState = newState
}

function redo() {
  if (future.length === 0) return
  const patches = future.pop()
  const [newState, inversePatches] = produceWithPatches(currentState, draft => {
    applyPatches(draft, patches)
  })
  history.push(inversePatches)
  currentState = newState
}

补丁格式说明

ImmerJS 生成的补丁格式类似于 RFC-6902 JSON Patch 标准，但路径使用数组而非字符串：

{
  "op": "replace",
  "path": ["user", "name"],
  "value": "Bob"
}

主要操作类型包括：

• add：添加新属性或数组元素
• remove：删除属性或数组元素
• replace：替换属性值

性能优化建议

1. 补丁压缩：连续的补丁可以进行合并优化，减少补丁数量
2. 选择性启用：只在需要时启用 Patches 功能，避免不必要的性能开销
3. 批量应用：多个补丁可以批量收集后一次性应用

注意事项

1. ImmerJS 保证生成的补丁是正确的，但不保证是最优的（数量最少）
2. 补丁应用顺序很重要，必须按照生成顺序依次应用
3. 对于复杂的状态变更，建议先测试补丁的回放效果

Patches 机制为状态管理提供了强大的灵活性，特别是在需要追踪变更历史、实现协同编辑或跨客户端同步的场景下，能够显著简化开发复杂度。

immer immerjs/immer: Immer 是一个用于不可变数据处理的 JavaScript 库，可以用于构建不可变数据结构和应用程序，支持多种编程语言和框架，如 JavaScript，TypeScript，React，Angular 等。 项目地址: https://gitcode.com/gh_mirrors/im/immer