Introduction to Svelte Readable Store
Tags: svelte
Published: 2021-12-29 05:20:10

---
title: Introduction to Svelte Readable Store
published: true
date: 
tags: svelte
canonical_url: https://eternaldev.com/blog/introduction-to-svelte-readable-store
series: Introduction to Svelte Stores
cover_image: https://www.eternaldev.com/static/411d0dd7d9d364bead14bcd3dc251efd/aa1b3/sveltestoreposter.webp
---

Store in Svelte are a very good way to keep the data and component logic separate and have access to those data across multiple components. In this article, we will learn how to make use of readable store from Svelte

## When to use Svelte Readable store ?

You might have some data which needs to be shared across component but components should not update the values. You can use this when building a stock market app where the data refreshes every second. The components should not update the data but can read the data to display in the UI.

To understand this, Let’s build an app which will get a new user data every 10 seconds and displays the user data on the screen.

[![SvelteStoreReadable.png](https://eternaldev.com/static/7cc726f134609e10b4dd229a503a99cf/eafa0/sveltestorereadable.png "SvelteStoreReadable.png")](/static/7cc726f134609e10b4dd229a503a99cf/eafa0/sveltestorereadable.png)

## Creating a readable store

Let’s start by creating an new Svelte with Typescript project using Vite. You can follow this post to create a new project

[https://www.eternaldev.com/blog/build-and-deploy-apps-with-svelte-and-vite/](https://www.eternaldev.com/blog/build-and-deploy-apps-with-svelte-and-vite/)

After setting a new project, you can add a new folder called `stores` and create a new file called `userStore.ts`

```
import { readable } from "svelte/store";

type UserData = {
    id: string;
    firstname: string;
    lastname: string;
}

export const user = readable(initialData, (set) => {

});
```

Let’s break down the code

1. We are importing `readable` from the “svelte/store”
2. We are adding `UserData` typescript type which will be used to store the data for the user.

## Calling API inside readable store

Since its readable store, we can only update the value of the store inside the store function. In our case, let’s call an API to fetch the data every 5 seconds and update the readable store.

`readable` store takes an initial value as the first argument. Second argument is the `start` function which has a `set` callback function. `set` callback is used to set the value of the store and cannot be used outside since its read-only for other components.

`start` function return a `stop` function. This is the interesting part as you can use these to perform cleanup when you store variable is not used by anyone.

> The `start` function is called when the store gets its first subscriber and `stop` is called when the last subscriber unsubscribes.

```
const initialData: UserData = {id: '123', firstname: 'First Name', lastname: 'Last Name'};

export const user = readable(initialData, (set) => {
    const userApiInterval = setInterval(() => {

        fetch('https://randomuser.me/api/').then((data) => data.json()).then((user) => {
            const {first, last } = user.results[0].name;
            const {value} = user.results[0].id;
            const newUser: UserData = {
                id: value,
                firstname: first,
                lastname: last
            }
            set(newUser);
        }).catch((ex) => {
            set(null);
        })

    }, 5000);
    
    return () => clearInterval(userApiInterval)
})
```

In our example, we are calling the `setInterval` in the start function and calling an API which will return random user data. We are using the `set` function to set the new data.

The `start` function returns a `stop` function which call the `clearInterval` in this case so as to cleanup the interval in the browser when there is no subscribers to this store.

> If you want to know about the API used here to get random user data, check this [link](https://randomuser.me/). It has a lot more data about the user than what is used in this example.

## Create component to use readable store

Create a new `UserDisplay.svelte` file in the lib folder.

```
<script lang="ts">
    import {user} from '../store/userStore';
</script>

{#if $user != null}
      <h1>{$user.firstname} {$user.lastname}</h1>
{:else}
    <h1>Error while loading the data</h1>
{/if}
```

1. Just import the store from `../store/userStore` and the use the variable
2. Check if the user value is not null and display the value
3. If the value is null, show error message

## Result

[![SvelteStoreReadable.png](https://eternaldev.com/static/7cc726f134609e10b4dd229a503a99cf/eafa0/sveltestorereadable.png "SvelteStoreReadable.png")](/static/7cc726f134609e10b4dd229a503a99cf/eafa0/sveltestorereadable.png)

## Conclusion

Readable store is a useful tool in the toolbox for svelte developers. I can help in reducing the code size and help prevent unwanted updates to the store data.