re: Enhance Your React App With Undo and Reset Abilities VIEW POST

FULL DISCUSSION
 

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?

 

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...

 

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

 

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)

 

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.

code of conduct - report abuse