Implementing Custom Stores

In the last chapter, we learned that a Svelte store is any object that follows a Svelte store contract, and encapsulating data within a Svelte store allows the data to be shared and used across multiple Svelte components reactively. The Svelte component keeps the DOM up to date with the data, even though the data is modified outside of the Svelte component.

We learned about two of Svelte’s built-in methods for creating a Svelte store—namely readable() and writable(), which create a readable and writable store. The two methods follow the Svelte contract and create a very basic Svelte store. However, besides using a Svelte store to encapsulate data, we can also encapsulate logic with the data, making the Svelte store modular and highly reusable.

In this chapter, we will be creating custom Svelte stores—Svelte stores that encapsulate custom data logic. We will go through three distinct examples; each example will serve as a guide,...

Technical requirements

All the code in this chapter can be found on GitHub: https://github.com/PacktPublishing/Real-World-Svelte/tree/main/Chapter09

Creating a Svelte store from user events

A Svelte store stores data, but where does the data come from?

It could be from user interaction or user input, which calls an event handler that updates the store value by calling store.set().

What if we can encapsulate the user events and event handler logic into the store so that we do not need to call store.set() manually?

For example, we are going to have a Svelte store to calculate how many times the user clicks on the screen. Instead of manually adding an event listener on the document, if there’s a way to create a Svelte store and update it every time there’s a new click, how would that look? In short, how about having a custom Svelte store that can do all of that for us?

It would be great if we could reuse this Svelte store the next time we have a similar need, instead of having to manually set it up again.

So, let’s try to implement this click counter custom Svelte store.

Let's first scaffold...

Creating an undo/redo store

Typically, we change a store’s value using the set method. However, the next custom Svelte store we’ll explore provides additional custom methods to update its store value. The next custom Svelte store that we are going to look at is an undo/redo store. It is similar to a writable store where you can subscribe to and set a new store value. But an undo/redo store also comes with two more methods, undo and redo, which revert the store value backward or forward, based on the history of the store value.

Here’s a snippet of how you would use an undo/redo store:

<script>
  let value = createUndoRedoStore();
  $value = 123;
  $value = 456;
  $value = 789;
  value.undo(); // $value now goes back to 456
  value.undo(); // $value now goes back to 123
  value.redo(); // $value now turns to 456
</script>
Value: {$value}

In the provided code snippet, the createUndoRedoStore...

Creating a debounced higher-order Svelte store

The two preceding sections that we’ve seen so far each created a new Svelte store. In this section, we are going to look at how we can create a higher-order store.

The concept of a higher-order store is inspired by a higher-order function, where functions are treated just like any other data. This means that you can pass functions as arguments to other functions or return them as values.

In a similar concept, we are going to create a function that treats stores just like any data, taking a Svelte store as an argument and then returning a Svelte store.

The idea of a higher-order Svelte store is to create a function that enhances an existing Svelte store. A higher-order Svelte store is a function that takes in a Svelte store and returns a new Svelte store, an enhanced version of the input Svelte store.

The example that we are going to use to illustrate this idea will create a debounce higher-order Svelte store.

The...

Summary

In this chapter, we looked at three different examples and learned three different techniques with a Svelte store.

We explored how to turn any user events into a data source for a Svelte store, learned how to create a Svelte store from scratch, and also learned how to use the built-in readable() function to make the process much simpler.

After that, we explored making a custom Svelte store with additional methods, building a new Svelte store based on the built-in writable store.

Lastly, we learned to create a higher-order store, a function that takes in a Svelte store and returns an enhanced version of the input store. In the example, we see how we can turn any Svelte store into a debounced version of itself.

By understanding these techniques, you’re now equipped to manage state in Svelte more effectively to craft more scalable and maintainable applications.

In the next chapter, we will look at state management in Svelte—namely, how to do state...