Blog post image

Get to know Svelte Stores, writable’s and readable’s

Most web applications today have a complex structure where most of the data gathered in fetch calls need to be accessible by components that are not direct children of that component. Before using the context API and stores we would be using what we call props-hell.

Props-hell is where you send all of the data needed in child components by adding them to the props of that component. Props would then allow you to access the data inside the child component and send it further if needed. This method works, but as you can imagine, after only a short period we would be having tons of props going both backs and forward which would result in over complexity. Complexity like this would make it hard to navigate and expand your web application.

In this article, we will talk about the Svelte store and more specifically the writable and readable functions. We will also talk a bit about how you can create custom stores and what the derived store is. 

What are Svelte stores?

In very simple words: Svelte stores is an object with an update function that allows you to access data in components that are not direct descents of the parent. With the Svelte store, you can easily update values that will change across your web application, and you can easily subscribe to these changes to make the DOM (Document Object Model) change together with the data.

Here is an example of a simple Svelte store and how we access that value in one of our components:

import { writable } from 'svelte/store';
export const count = writable(0);

First, we had an example of how a simple store would look like with just one writable. In the next section, we will talk about the different types of stores that exist, but first, let's see how we can subscribe to this value and update it:

<script>
import { count } from './stores.js';
import Incrementer from './Incrementer.svelte';

let count_value;

function increment() {
    count.update(n => n + 1);
}
</script>

<h1>The count is {$count}</h1>

<Incrementer increment={increment} />


Okay, so what happened above is that we get the count from our Svelte store. Then we assign it as a value to the h1 and you probably noticed that we added a dollar sign in front of it (Click here to read more about auto-subscription in Svelte). Last but not least we added a function to update the state in our Svelte store and attached it to another function we added to our incrementer. Once we click on the incrementer we will increase the value by one.

Which types of Svelte stores exist?

In Svelte we have two different types of stores and each one has its own very unique way to be used. In this section, we will look at what these types are and explain a bit more about how you can use them.

Svelte store - Writable

The first type of store we will be looking at, and probably also the one you will be using the most is the Svelte store writable. This store is allowing you to do exactly as the name says: add a store that can be overwritten with new data.

import { writable } from 'svelte/store';

export const blogposts = writable([]);

The svelte store writable comes in handy when you have data that you know is updating during its lifetime. To give you an example: A person is visiting your blog which you made with Svelte. As standard, you don't list out all of your blog posts directly on the page but instead request them from an API. To hold your blogposts we can use a Svelte store writable, and we start by giving it a default value which will be an empty array. Once we receive the data from the API, we use the update function to replace the empty array with our blogposts. Now you can access the new data from your Svelte store and even update it again if needed.

Svelte store - Readable

The last type of Svelte store we will be looking at is the "readable" which allows you to assign a value to it but not change it. This store is very useful when you have data such as an API string that doesn't change but there are several places in your web application you need to access it. Some data doesn't change in those cases you can use the readable to ensure that the data simply cannot be changed.

import { readable } from 'svelte/store';

export const apiStr = readable("/api/v3/");

In the example above you see how simple it is to add a readable value and accessing it in your Svelte web application is just as simple as accessing the writable store.

How do I subscribe to a Svelte store value?

In your web application, you want to subscribe to the value to make sure that the DOM (Document object model) updates together with the value. This is actually very easy, and in fact, you have already seen an example of the auto-subscription feature from Svelte earlier in this article. If you go up and take a look at the example where we have an h1. As a value of the h1 we put {$count}. 

The dollar sign is called an auto-subscription which allows you to automatically subscribe to the value. This ensures that the DOM will update together with the value. 

You can also do this with a function instead. This is useful if you want to do multiple things when a value updates. Underneath here you will see an example of how a subscribe function looks like.

count.subscribe(value => {
    count_value = value;
});

All of this probably seems a bit confusing to you right now and you might also be asking yourself which of these you should be using. We have made an article to explain all about the auto-subscription feature and the subscribe function and you can read it here: https://sustainablewww.org/principles/should-you-use-sveltes-store-subscribe-or-the-reactivity-dollar-sign.

Wrapping up

By now you know what the two most used Svelte stores can do and when you should be using them. We hope that you now feel more comfortable using both the readable and the writable functions in your Svelte project.

We also talked a bit about the auto-subscription function and the subscribe function as well, but sadly this is a whole article for itself just to explain the differences and when you should be using what. Luckily we made an article just for this purpose, and we hope that you will read that too.

Last but not least we would like to thank you for reading this article, and if you have the information you think should be added to the article or you just want to say hi, please don't hesitate to contact us through our contact page.

Author

Michael Andersen

Michael Andersen

I am a self-taught and highly passionate web developer currently living in Sweden, where I use my skills to make the internet a better place through ethical and sustainable web design.