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 ---
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
Thanks for watching 🥰 -- with love, Li Hau