DEV Community

Discussion on: Undo/Redo in React Using XState

Collapse
 
ruiorey profile image
Rui Luís d'Orey

Hey Robert, nice approach and excelent article!

What would you say in a case we have several actor machines like in a 3d editor (3d objects with transforms, materials, etc) and we want to have a general application undo/redo? would you use a top level machine that manages and gets notifications on every context changes by all the child machines? And saves those aggregated changes and reapplies them if needed on the child machines? Or would you have individual by machine undo/redo logic and some way to know what was the latest changed machine and make it undo/redo, (also from some top machine I guess).
Thanks!

Collapse
 
robertbroersma profile image
Robert

Hey Rui,

That's a good question!

I think I would go with a top-level kind of history machine like in your last example, to keep the concerns of the machines separated.

One way you could go about this is to implement the Command Pattern with undoable commands.

This works well because your history machine just needs to keep a stack of the commands in memory, as opposed to a stack of ALL previous (and some future) state.

Hope that helps!

Collapse
 
ruiorey profile image
Rui Luís d'Orey

Hey Robert,
thanks for the answer.
Yes one classical way is using Command Pattern, now what I'm trying to get around is how to model that using XState (or not, maybe taking that out of Xstate) in an elegant and safe way.
I will also make this question on spectrum.chat/statecharts to see what other suggestions might come up.
Thanks a lot :)