Custom Svelte Store: Immer for Immutable Svelte store

In this video, we are going to take a look at how we can make Svelte store immutable using Immer.

Immer allow us to work on immutable state in a more convenient way.
Changes are applied to the draft, which is a proxy of the state, which then produces the next state.

We will explore how we can create 2 stores, the draft store and the state store, which we can make changes directly to the draft store, and see the changes reflected on the state store.

Immer optimises the immutable state data structure, if the sub object is not changed, it will still maintain the same reference. Only part of the state object that has changed gets updated.
This bring us the opportunity to optimise the subscriber by using the derived store, to derive the substate into a new store.

Introduction 00:00
Looking at Immer doc 00:49
Using produce 02:50
Create the Immer Svelte Store 05:05
Debouncing the changes 12:30
Benefits of using Immer with Svelte 15:45
Deriving from the Immer store 17:50
svelte options immutable 21:04
Implementing undo using patches 24:33

💻 REPL: https://svelte.dev/repl/a8cd6cc371604d44902f01bd18fe29a2

📚 Related Resources
- Tutorials https://svelte.dev/tutorial/custom-stores
- Immer https://immerjs.github.io/immer/

🥰 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

Видео Custom Svelte Store: Immer for Immutable Svelte store канала lihautan