Implementing undo / redo in Redux

Question

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 come up w

Answer 1

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.com/intelie/immutable-js-diff. It creates RFC-6902 style patches which you can execute using http://hackersome.com/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 command 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.