MAIS AMOR POR FAVOR

Readable and Writable Svelte Stores: when to Use Each

Readable and Writable Svelte Stores

Readable and Writable Svelte Stores: when to Use Each

SHARE:

πŸ›οΈ 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

Readable and Writable Svelte Stores: when to Use Each

πŸ—³οΈ Poll

Have you already used Svelte stores in a project?
Voting reveals latest results.

πŸ–₯ Readable and Writable Svelte Stores: Code

Writable Svelte Store

src/lib/shared/stores/theme.js
javascript
1import { browser } from '$app/env';
2import { writable } from 'svelte/store';
3
4const defaultValue = 'summer';
5const initialValue = browser ? window.localStorage.getItem('theme') ?? defaultValue : defaultValue;
6
7export const theme = writable<string>(initialValue);
8
9theme.subscribe((value) => {
10 if (browser) {
11 window.localStorage.setItem('theme', value);
12 }
13});
14
15export { 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: 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, and need 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.

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 Optimisation among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.