DEV Community

Discussion on: Enhance Your React App With Undo and Reset Abilities

Collapse
 
paveltrufi profile image
Pavel Razgovorov

Amazing tutorial, congratulations!

However, I'm concerned about the fact that you're storing in the history the hole state every time you change it. I think that storing only the difference between state changes would be way more efficient. How would you implement that approach?

Collapse
 
rohanbagchi profile image
Rohan Bagchi • Edited

Actually immer solves it elegantly. Storing only diffs as user intents. Very valuable when building a system being worked on by many clients at the same time.

Lookup medium.com/@mweststrate/distributi...

Collapse
 
paveltrufi profile image
Pavel Razgovorov • Edited

I didn't hear about this library. I'll try to check it out when I'll have time!

Collapse
 
jsmanifest profile image
jsmanifest • Edited

Hi Pavel and thank you for the kind compliment!

That is a good question! To implement an undo/reset feature for specific parts of the state, you can actually just use the same approach but instead of passing in the entire state, you only need to pass in a specific part of the state as you choose. That part of the state is the what you'd pass to the user interface and any child component can inherit off of that. You can additionally declare a second, third, fourth state.history under a different alias and use that for other slices of the state.

If you'd like me to, I can write on an upcoming tutorial on how to create an application implementing multiple undos for three different components all in the same interface, completely isolated away from eachother and still sharing the same root state)

Collapse
 
paveltrufi profile image
Pavel Razgovorov

That would be great if you want to do it. Anyway I would try to implement some sort of Command pattern with the ability to "redo" the command as well (something I missed in this tutorial) 🤔, so the friends array are constructed based on the actions performed, and not maintaining two separate arrays.