undo_redo.js

const commands = {
  add: {
    do(state, action) {
      return {
        num: state.num + action.x
      };
    },
    undo(state, action) {
      return {
        num: state.num - action.x
      };
    },
  },
  mul: {
    do(state, action) {
      return {
        num: state.num * action.x
      };
    },
    undo(state, action) {
      return {
        num: state.num / action.x
      };
    },
  },
};

class StateManager {
  constructor() {
    this.state = {
      num: 0
    };
    this.history = [];
    this.historyI = 0;
  }

  print() {
    console.log(this.state);
  }

  invoke(action) {
    this.history.push(action);
    this.redo();
  }

  undo() {
    const action = this.history[--this.historyI];
    this.state = commands[action.type].undo(this.state, action);
  }

  redo() {
    const action = this.history[this.historyI++];
    this.state = commands[action.type].do(this.state, action);
  }
}

const sm = new StateManager();

sm.print();
sm.invoke({type: 'add', x: 3});
sm.print();
sm.invoke({type: 'mul', x: 2});
sm.print();
sm.invoke({type: 'add', x: -2});
sm.print();
sm.invoke({type: 'mul', x: 5});
sm.print();
sm.undo();
sm.undo();
sm.undo();
sm.print();
sm.redo();
sm.redo();
sm.redo();
sm.print();