How to Implement Undo in a React + Redux Application
How to implement undo functionality in a react + redux web application. This article explains how we designed Kapwing's undo stack with notes on technical design and edge cases. A resource for other web developers adding undo to a browser-based productivity app.
kapwing.com
"Collaboration," or multiple users performing autosaved work at the same time, is an additional consideration for implementing undo/redo stacks. A page that has heavy collaboration will need more care. If the app will mostly have one user and sometimes two, you probably don't need to think too hard about this.
Two users might issue saves / undos at the same time. This can have two problems: first, the behavior of one user can unexpectedly overwrite what another user is doing (in a last-write wins setup). It turns out that users get upset when their changes get stomped by someone else. Or if their actions are partial updates that get merged together, you need to be careful that the synthesized result doesn't result in an illegal state, both for the undo and the redo.
There are other hidden gotchas that can come up occasionally: making sure that users always have permissions to execute all of the "undo" and "redo" actions, making sure that deletions from one user doesn't wipe out a ton of work from the other user, etc. But it's worth suffering through all of this for the user experience!
Thanks for sharing! Very helpful.
Why still using Redux? Was it just too hard to get off of? Uclusion has a blog about getting off the React + Redux combination.
I think there's pros and cons for all the different forms of state management and there's no true silver bullet. I've used redux by itself, redux + context, context by itself, etc. They all have their specific use cases in my opinion.