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/4126151f40214bb985f42a80166c7ec3?version=3.38.3

📚 Related Resources
get() https://svelte.dev/docs#get
Immer: Using produce https://immerjs.github.io/immer/produce
Immer for immutable Svelte store https://youtu.be/mHqCAEUkiWs
Higher Order store https://youtu.be/p1aPfVyZ1IY

🥰 Support me https://www.buymeacoffee.com/lihautan

🔗 Want to learn more from me? Check out these links:

Twitter: https://twitter.com/lihautan
Blog: https://lihautan.com/
Newsletter: https://lihautan.com/newsletter

#svelte #sveltestore

Thanks for watching 🥰 -- with love, Li Hau

Видео Undo / Redo with Svelte Store канала lihautan