22、构建 Logo 解释器：实现撤销、重做、本地存储与焦点控制

构建 Logo 解释器：实现撤销、重做、本地存储与焦点控制

1. 撤销和重做功能的实现

在开发过程中，撤销（Undo）和重做（Redo）功能是提升用户体验的重要部分。下面详细介绍如何实现这两个功能。

1.1 撤销功能测试与实现

• canRedo 测试 ：最后一个测试是关于 canRedo 的，测试在撤销操作后 canRedo 是否被设置为 true 。

it('sets canRedo to true after undoing', () => {
  const updated = reducer(newState, undoAction);
  expect(updated.canRedo).toBeTruthy();
});

• 实现撤销逻辑 ：通过返回包含 lastEntry 和新的 canRedo 属性的新对象来使测试通过。

case 'UNDO':
  const lastEntry = past[past.length - 1];
  past = past.slice(0, -1);
  return {
    ...lastEntry,
    canRedo: t