Background

For a while now I've been wracking my brain as to how you would implement undo / redo in Redux with server interactions (via ajax).

I've e up with a solution using a mand pattern where actions are registered with an execute and undo method as Commands, and instead of dispatching actions you dispatch mands. The mands are then stored in a stack and raise new actions where required.

My current implementation uses middleware to intercept dispatches, test for Commands and call methods of the Command and looks something like this:

Middleware

let mands = [];
function undoMiddleware({ dispatch, getState }) {
  return function (next) {
    return function (action) {
      if (action instanceof Command) {
        // Execute the mand
        const promise = action.execute(action.value);
        mands.push(action);
        return promise(dispatch, getState);
      } else {
        if (action.type === UNDO) {
            // Call the previous mands undo method
            const mand = mands.pop();
            const promise = mand.undo(mand.value);
            return promise(dispatch, getState);
        } else {
            return next(action);
        }
      }
    };
  };
}

Actions

const UNDO = 'UNDO';
function undo() {
    return {
        type: UNDO
    }
}

function add(value) {
    return (dispatch, getState) => {
        const { counter } = getState();
        const newValue = counter + value;

        return new Promise((resolve, reject) => {
            resolve(newValue); // Ajax call goes here
        }).then((data) => {
            dispatch(receiveUpdate(data));
        });
    }
}

function sub(value) {
    return (dispatch, getState) => {
        const { counter } = getState();
        const newValue = counter - value;

        return new Promise((resolve, reject) => {
            resolve(newValue); // Ajax call goes here
        }).then((data) => {
            dispatch(receiveUpdate(data));
        });
    }
}

Commands

class Command {
  execute() {
    throw new Error('Not Implemented');
  }

  undo() {
    throw new Error('Not Implemented');
  }
}

class AddCommand extends Command {
    constructor(value) {
        super();
        this.value = value;
    }

    execute() {
        return add(this.value);
    }

    undo() {
        return sub(this.value);
    }
}

App

const store = createStoreWithMiddleware(appReducer);

store.dispatch(new AddCommand(10)); // counter = 10
store.dispatch(new AddCommand(5)); // counter = 15

// Some time later
store.dispatch(undo()); // counter = 10

(a more plete example here)

There are several issues I've found with my current approach:

• Due to implementing via middleware, only one stack may exist for the entire application.
• Cannot customise UNDO mand type.
• Creating a Command to call actions which in turn return promises seems very convoluted.
• Commands are added to the stack before the action pletes. What happens for errors?
• As mands are not in state, cannot add is_undoable functionality.
• How would you implement optimistic updates?

Help

My question then, is can anyone suggest a better way of implementing this functionality within Redux?

The biggest flaws I see right now are the mands being added before actions have pleted, and how it would be difficult to add optimistic updates to the mix.

Any insight is appreciated.

Background

For a while now I've been wracking my brain as to how you would implement undo / redo in Redux with server interactions (via ajax).

I've e up with a solution using a mand pattern where actions are registered with an execute and undo method as Commands, and instead of dispatching actions you dispatch mands. The mands are then stored in a stack and raise new actions where required.

My current implementation uses middleware to intercept dispatches, test for Commands and call methods of the Command and looks something like this:

Middleware

let mands = [];
function undoMiddleware({ dispatch, getState }) {
  return function (next) {
    return function (action) {
      if (action instanceof Command) {
        // Execute the mand
        const promise = action.execute(action.value);
        mands.push(action);
        return promise(dispatch, getState);
      } else {
        if (action.type === UNDO) {
            // Call the previous mands undo method
            const mand = mands.pop();
            const promise = mand.undo(mand.value);
            return promise(dispatch, getState);
        } else {
            return next(action);
        }
      }
    };
  };
}

Actions

const UNDO = 'UNDO';
function undo() {
    return {
        type: UNDO
    }
}

function add(value) {
    return (dispatch, getState) => {
        const { counter } = getState();
        const newValue = counter + value;

        return new Promise((resolve, reject) => {
            resolve(newValue); // Ajax call goes here
        }).then((data) => {
            dispatch(receiveUpdate(data));
        });
    }
}

function sub(value) {
    return (dispatch, getState) => {
        const { counter } = getState();
        const newValue = counter - value;

        return new Promise((resolve, reject) => {
            resolve(newValue); // Ajax call goes here
        }).then((data) => {
            dispatch(receiveUpdate(data));
        });
    }
}

Commands

class Command {
  execute() {
    throw new Error('Not Implemented');
  }

  undo() {
    throw new Error('Not Implemented');
  }
}

class AddCommand extends Command {
    constructor(value) {
        super();
        this.value = value;
    }

    execute() {
        return add(this.value);
    }

    undo() {
        return sub(this.value);
    }
}

App

const store = createStoreWithMiddleware(appReducer);

store.dispatch(new AddCommand(10)); // counter = 10
store.dispatch(new AddCommand(5)); // counter = 15

// Some time later
store.dispatch(undo()); // counter = 10

(a more plete example here)

There are several issues I've found with my current approach:

• Due to implementing via middleware, only one stack may exist for the entire application.
• Cannot customise UNDO mand type.
• Creating a Command to call actions which in turn return promises seems very convoluted.
• Commands are added to the stack before the action pletes. What happens for errors?
• As mands are not in state, cannot add is_undoable functionality.
• How would you implement optimistic updates?

Help

My question then, is can anyone suggest a better way of implementing this functionality within Redux?

The biggest flaws I see right now are the mands being added before actions have pleted, and how it would be difficult to add optimistic updates to the mix.

Any insight is appreciated.

• javascript
• reactjs
• redux
• undo-redo

• 1 Had a chance to look at github./ForbesLindesay/redux-optimist yet? – Dan Abramov Commented Nov 18, 2015 at 23:02
• I have indeed (nice little library). I can see how I could use it to help with my optimistic issues, but like redux-undo it only deals with reversing actions inside reducers. With async undo I'm struggling where and how to store the mand stack within state, as this seems like the most logical place for it to exist in this type of application. – Ashley 'CptLemming' Wilson Commented Nov 19, 2015 at 12:40
• 3 It seems that the often touted claim "undo/redo is easy with redux" is a half-truth (at best). I find myself in the same situation as you, needing to sync server state with a DB/REST API. Curiously, none of the redux docs or associated undo/redo libs even mention this extremely mon use case. I would venture that most setups have to deal with this. I too am looking for a way to easily undo/redo changes to my store and easily update my server. My current thought is to keep track of actions & action arguments instead of state changes. That seems a bit similar to your approach in concept. – Ray Nicholus Commented Jul 19, 2016 at 14:59

3 Answers 3

Debating further on the Immutable based implementation suggested by @vladimir-rovensky...

Immutable works very well for client side undo-redo management. You can simply store last "N" instances of the immutable state either yourself or using a library like immstruct which does it for you. It doesn't result in memory overhead due to instance sharing built into immutable.

However, syncing the model every-time with the server may be costly if you wish to keep it simple, because you would need to send the entire state to server every time it is modified on client. Depending on the state size this will not scale well.

A better approach will be to send only the modifications to the server. You need a "revision" header in your state when you send it initially to the client. Every other modification to the state done on client should record only the diffs and send them over to the server with the revision. The server can execute the diff operations and send back a new revision and checksum of the state following the diffs. The client can verify this against current state checksum and store the new revision. The diffs can also be stored by the server tagged with the revision and checksum in its own undo history. If an undo is desired on the server, the diffs can be reversed to obtain the state and checksum checks can be performed. A diffing library for immutable which I came across is https://github./intelie/immutable-js-diff. It creates RFC-6902 style patches which you can execute using http://hackersome./p/zaim/immpatch on the server state.

Advantages-

• Simplified client architecture. Server sync up is not scattered all over the client code. It can be initiated from your stores whenever client state changes.
• Simple undo/redo syncs with server. No need to handle different client state changes individually, aka no mand stacks. The diff patch tracks almost any kind of state changes in a consistent fashion.
• Server side undo history without major transaction hits.
• Validation checks ensure data consistency.
• Revision header allows for multi-client simultaneous updates.

You've e up with the best possible solution, yes Command Pattern is the way to go for async undo/redo.

A month ago I realised that ES6 generators are quite underestimated and may bring us some better use cases than calculating fibonacci sequence. Async undo/redo is a great example.

In my opinion, the principle problem with your approach is usage of classes and ignoring failing actions (optimistic update is too optimistic in your example). I tried to solve the problem using async generators. The idea is pretty simple, AsyncIterator returned by async generator can be resumed when undo is needed, this basically means that you need to dispatch all intermediate actions, yield the final optimistic action and return the final undo action. Once the undo is requested you can simply resume the function and execute everything what is necessary for undo (app state mutations / api calls / side effects). Another yield would mean that the action hasn't been successfully undone and user can try again.

The good thing about the approach is that what you simulated by class instance is actually solved with more functional approach and it's function closure.

export const addTodo = todo => async function*(dispatch) {
  let serverId = null;
  const transientId = `transient-${new Date().getTime()}`;

  // We can simply dispatch action as using standard redux-thunk
  dispatch({
    type: 'ADD_TODO',
    payload: {
      id: transientId,
      todo
    }
  });

  try {
    // This is potentially an unreliable action which may fail
    serverId = await api(`Create todo ${todo}`);

    // Here es the magic:
    // First time the `next` is called
    // this action is paused exactly here.
    yield {
      type: 'TODO_ADDED',
      payload: {
        transientId,
        serverId
      }
    };
  } catch (ex) {
    console.error(`Adding ${todo} failed`);

    // When the action fails, it does make sense to
    // allow UNDO so we just rollback the UI state
    // and ignore the Command anymore
    return {
      type: 'ADD_TODO_FAILED',
      payload: {
        id: transientId
      }
    };
  }

  // See the while loop? We can try it over and over again
  // in case ADD_TODO_UNDO_FAILED is yielded,
  // otherwise final action (ADD_TODO_UNDO_UNDONE) is returned
  // and mand is popped from mand log.
  while (true) {
    dispatch({
      type: 'ADD_TODO_UNDO',
      payload: {
        id: serverId
      }
    });

    try {
      await api(`Undo created todo with id ${serverId}`);

      return {
        type: 'ADD_TODO_UNDO_UNDONE',
        payload: {
          id: serverId
        }
      };
    } catch (ex) {
      yield {
        type: 'ADD_TODO_UNDO_FAILED',
        payload: {
          id: serverId
        }
      };
    }
  }
};

This would of course require middleware which is able to handle async generators:

export default ({dispatch, getState}) => next => action => {
  if (typeof action === 'function') {
    const mand = action(dispatch);

    if (isAsyncIterable(mand)) {
      mand
        .next()
        .then(value => {
          // Instead of using function closure for middleware factory
          // we will sned the mand to app state, so that isUndoable
          // can be implemented
          if (!value.done) {
            dispatch({type: 'PUSH_COMMAND', payload: mand});
          }

          dispatch(value.value);
        });

      return action;
    }
  } else if (action.type === 'UNDO') {
    const mandLog = getState().mandLog;

    if (mandLog.length > 0 && !getState().undoing) {
      const mand = last(mandLog);

      mand
        .next()
        .then(value => {
          if (value.done) {
            dispatch({type: 'POP_COMMAND'});
          }

          dispatch(value.value);
          dispatch({type: 'UNDONE'});
        });
    }
  }

  return next(action);
};

The code is quite difficult to follow so I have decided to provide fully working example

UPDATE: I am currently working on rxjs version of redux-saga and implementation is also possible by using observables https://github./tomkis1/redux-saga-rxjs/blob/master/examples/undo-redo-optimistic/src/sagas/mandSaga.js

Not sure I understand your use case pletely, but in my opinion the best way to go about implementing undo/redo in ReactJS is via an immutable model. Once your model is immutable, you can easily maintain a list of states as they change. Specifically, you need an undo list and a redo list. In your example it would be something like:

1. Starting counter value = 0 -> [0], []
2. Add 5 -> [0, 5], []
3. Add 10 -> [0, 5, 15], []
4. Undo -> [0, 5], [15]
5. Redo -> [0, 5, 15], []

The last value in the first list is the current state (that goes into the ponent state).

This is a much simpler approach then Commands, since you don't need to define undo/redo logic separately for every action you want to perform.

If you need to synchronize state with the server, you can do that too, just send your AJAX requests as part of the undo/redo operation.

Optimistic updates should also be possible, you can update your state immediately, then send your request and in its error handler, revert to state prior to the change. Something like:

  var newState = ...;
  var previousState = undoList[undoList.length - 1]
  undoList.push(newState);
  post('server.', buildServerRequestFrom(newState), onSuccess, err => { while(undoList[undoList.length-1] !== previousState) undoList.pop() };

In fact I believe you should be able to achieve all the goals you listed with this approach. If you feel otherwise, could you be more specific about what you need to be able to do?