Undo / Redo with Svelte Store
Let's take a look at how we can implement a Svelte store with undo / redo ability
Svelte store aside, if you want to implement undo / redo / time travel of a data, there's generally 2 approaches:
1. storing a history of actions, undo/redo becomes replaying / rewind the actions
2. storing a history of snapshots of your data, undo / redo becomes reverting to the snapshot of your data
To bring it back to svelte store, i have a concept called higher-order store, which is a function to create a new store out of existing store, with enhanced ability. This allow us to add undo / redo ability to either writable, tweened, or spring store !
We are going to explore both approaches.
Introduction 00:00
The set up 00:30
The 2 approaches 01:48
Approach 1 - History of actions 05:34
action creator 12:20
Implementing the history of actions 15:43
Redoing the action 19:46
Summary of approach 1 30:07
Approach 2 - History of snapshots 32:49
Svelte store with mutable objects 38:53
Cloning objects into snapshots 44:20
Update Svelte store immutably 52:45
Immutability with Immer 55:00
Summary of approach 2 59:20
---
💻 REPL: https://svelte.dev/repl/4126151f40214...
📚 Related Resources
get() https://svelte.dev/docs#get
Immer: Using produce https://immerjs.github.io/immer/produce
Immer for immutable Svelte store • Custom Svelte Store: Immer for Immutable S...
Higher Order store • Custom Svelte Store: Higher Order Store
🥰 Support me https://www.buymeacoffee.com/lihautan
🔗 Want to learn more from me? Check out these links:
Twitter: / lihautan
Blog: https://lihautan.com/
Newsletter: https://lihautan.com/newsletter
#svelte #sveltestore
Thanks for watching 🥰 -- with love, Li Hau