https://github.com/g770728y/valor-unistore-undo

经典的命令模式, 实现undo/redo操作, 方便结合react组件使用
https://github.com/g770728y/valor-unistore-undo

Last synced: 3 days ago
JSON representation

经典的命令模式, 实现undo/redo操作, 方便结合react组件使用

• Host: GitHub
• URL: https://github.com/g770728y/valor-unistore-undo
• Owner: g770728y
• Created: 2020-01-08T09:55:44.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T13:53:15.000Z (about 2 years ago)
• Last Synced: 2023-03-02T22:26:25.494Z (almost 2 years ago)
• Language: TypeScript
• Homepage:
• Size: 824 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 经典的命令模式, 实现 undo/redo

依赖`unistore`

# 如何在`react`组件中使用

在`react`顶级组件中增加一个 commandManager 属性, 绑定`store`

然后可在外部`ref.commandManager`使用

当然你也可以使用 controller 钩子, 把 commandManager 暴露出去.

# 具体使用方法:

详细参见 `index.test.ts`

```

// 第一步: store 及 Command类的 定义

    const store = createStore<{ a: number }>({ a: 1 });

    class Inc_n_Command extends ICommand<{ a: number }> {

      n: number = 0;

      constructor(store, params) {

        super(store, params);

      }

      execute = () => {

        this.do();

      };

      undo = () => {

        store.setState({ a: this.store.getState().a - this.params.n });

      };

      do = () => {

        store.setState({ a: this.store.getState().a + this.params.n });

      };

    }

    const commandManager = new CommandManager(store);

    expect(store.getState().a).toEqual(1);

// 第二步: 使用

    commandManager.execute(Inc_n_Command as any, 2);

    expect(store.getState().a).toEqual(3);

    expect(commandManager.undoStack.length).toEqual(1);

    expect(commandManager.redoStack.length).toEqual(0);

    // 可undo

    commandManager.undo();

    expect(store.getState().a).toEqual(1);

    expect(commandManager.undoStack.length).toEqual(0);

    expect(commandManager.redoStack.length).toEqual(1);

    // 可redo

    commandManager.redo();

    expect(store.getState().a).toEqual(2);

    expect(commandManager.undoStack.length).toEqual(1);

    expect(commandManager.redoStack.length).toEqual(0);

```