What are Svelte Stores?

Svelte stores offer a mechanism for sharing application state between distant site components. When the components are close, it might make more sense to pass the state as a prop. So you might have a button on a page which controls whether a modal is open or not. You might store the state in a variable, and if the modal component itself needs to know if it should be open or closed, it is fine to pass the state variable as a prop (no store needed). When you look at something like site colour theme, which is the same for all site components, it is less convenient to pass this from component to component. Here, using a Svelte store is a sensible alternative. Svelte stores can be readable or writable, depending on whether you want to modify the store values after they are initially set. Both are easy to set up and access with minimal boilerplate code.

When should you use a readable Svelte store?

Readable Svelte stores are fantastic for properties that are set and never need updating. An example might be whether the user has set a particular preference in their browser. We talked about the prefers reduced motion preference in the video. This is something the user will not normally need to adjust, while using the site. If they have vestibular disorders, they will likely already have set their preference on their device. You just need to read their setting to make your app more comfortable for them to use. Here, a readable store works really well. Readable stores work on static and server side rendered pages alike.

When should you use a writable Svelte store?

Writable Svelte stores are a great alternative to readable stores when the user might need to change their preference for a particular setting. As an example, for a site colour theme, they might switch to dark mode when working at night but use the light theme during the day. Svelte stores can be used to hold the user's current preference for light or dark mode. The user might toggle the switch at dusk to reduce the levels of blue light emitted from their device. Naturally the app will want to respond to their preference as it changes from their initial light mode preference. Since we would want to change the store from its initial value, a writable store fits the bill here.

Readable and Writable Svelte Stores: when to Use Each # Readable and Writable Svelte Stores: when to Use Each #

Readable and Writable Svelte Stores: when to Use Each #

Published: 3 years ago

4 minute read

Gunning Fog Index: 8

Content by Rodney

🛍 What’s in Store in this Video? #

Readable and writable stores in Svelte allow you easily to manage state across distant components in your app with very little boilerplate code. The kind of state we are talking about is something like site colour theme. You can use a writable store as a single source of truth for the theme. Then, if you have an external map service component or even a CAPTCHA component, they can both query the store to check which theme the user set and keep the user interface consistent.

We just mentioned a writable store, but Svelte also offers a readable store. In this video, we look at when it would make more sense to opt for a readable store versus a writable Svelte store. As well as that, we look at a usage example for each case. I hope you will find this useful if you are just getting started with Svelte stores and that it helps you on your journey.

📹 Readable and Writable Svelte Stores: Video #

Please enable JavaScript to watch the video 📼

Readable and Writable Svelte Stores: when to Use Each

🗳 Poll #

Have you already used Svelte stores in a project?

🖥 Readable and Writable Svelte Stores: Code #

Writable Svelte Store #

src/lib/shared/stores/theme.js

javascript

    import { browser } from '$app/env';
import { writable } from 'svelte/store';
const defaultValue = 'summer';
const initialValue = browser ? window.localStorage.getItem('theme') ?? defaultValue : defaultValue;
export const theme = writable < string > initialValue;
theme.subscribe((value) => {
  if (browser) {
    window.localStorage.setItem('theme', value);
  }
});
export { theme as default };

Readable Svelte Store #

Readable stores work in very much the same way:

    import { browser } from '$app/env';
import { readable } from 'svelte/store';

See the code snippet from the video on Geoff Rich's blog post for a more concrete example.

🔗 Readable and Writable Svelte Stores: Links #

🏁 Readable and Writable Svelte Stores: Summary #

What are Svelte Stores? #: Svelte stores offer a mechanism for sharing application state between distant site components. When the components are close, it might make more sense to pass the state as a prop. So you might have a button on a page which controls whether a modal is open or not. You might store the state in a variable, and if the modal component itself needs to know if it should be open or closed, it is fine to pass the state variable as a prop (no store needed). When you look at something like site colour theme, which is the same for all site components, it is less convenient to pass this from component to component. Here, using a Svelte store is a sensible alternative. Svelte stores can be readable or writable, depending on whether you want to modify the store values after they are initially set. Both are easy to set up and access with minimal boilerplate code.
When should you use a readable Svelte store? #: Readable Svelte stores are fantastic for properties that are set and never need updating. An example might be whether the user has set a particular preference in their browser. We talked about the prefers reduced motion preference in the video. This is something the user will not normally need to adjust, while using the site. If they have vestibular disorders, they will likely already have set their preference on their device. You just need to read their setting to make your app more comfortable for them to use. Here, a readable store works really well. Readable stores work on static and server side rendered pages alike.
When should you use a writable Svelte store? #: Writable Svelte stores are a great alternative to readable stores when the user might need to change their preference for a particular setting. As an example, for a site colour theme, they might switch to dark mode when working at night but use the light theme during the day. Svelte stores can be used to hold the user's current preference for light or dark mode. The user might toggle the switch at dusk to reduce the levels of blue light emitted from their device. Naturally the app will want to respond to their preference as it changes from their initial light mode preference. Since we would want to change the store from its initial value, a writable store fits the bill here.

🙏🏽 Feedback #

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

Are you new to ❤️ Svelte and wondering when to use a readable store and when a writable store makes more sense?

- let's investigate,

- Svelte stores offer a convenient way to share state between distant components with minimal boiler plate,

- great use case is a theme toggle.

pic.twitter.com/iVXt6dwyHp
— Rodney (@askRodney) November 29, 2021

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.